Bump postcss and css-loader

Bumps [postcss](https://github.com/postcss/postcss) to 8.4.31 and updates ancestor dependencies [postcss](https://github.com/postcss/postcss) and [css-loader](https://github.com/webpack-contrib/css-loader). These dependencies need to be updated together. Updates `postcss` from 7.0.35 to 8.4.31 - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/7.0.35...8.4.31) Updates `postcss` from 8.2.10 to 8.4.31 - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/7.0.35...8.4.31) Updates `css-loader` from 1.0.0 to 6.8.1 - [Release notes](https://github.com/webpack-contrib/css-loader/releases) - [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/css-loader/compare/v1.0.0...v6.8.1) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect - dependency-name: postcss dependency-type: indirect - dependency-name: css-loader dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>
Copy json results button (#1631 )
2026-01-05 18:47:41 +00:00 · 2023-10-04 00:49:24 +00:00 · 2023-10-03 15:01:05 -04:00 · 2023-10-03 17:13:24 +02:00 · 2023-10-02 11:28:37 -05:00 · 2023-10-02 11:28:25 -05:00
423 changed files with 9470 additions and 34852 deletions
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/.vscode/settings.json
+++ b/.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"
 }
--- a/images/CopilotCopy.svg
+++ b/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>
--- a/images/CopilotExplain.svg
+++ b/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>
--- a/images/CopilotInsert.svg
+++ b/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>
--- a/images/CopilotLikeHover.svg
+++ b/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>
--- a/images/CopilotLikePressed.svg
+++ b/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>
--- a/images/CopilotLikeRest.svg
+++ b/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>
--- a/images/CopilotOptimize.svg
+++ b/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>
--- a/images/CopilotRegenerate.svg
+++ b/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>
--- a/images/CopilotSimplify.svg
+++ b/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>
--- a/images/Table.svg
+++ b/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>
--- a/images/vcoreMongoFirewallRule.png
+++ b/images/vcoreMongoFirewallRule.png
--- a/jest.config.js
+++ b/jest.config.js
@@ -68,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",
@@ -165,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
--- a/less/Common/Constants.less
+++ b/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: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
+  display:~"-webkit-@{display}";
+  display:~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  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:hover {
+  .tab [type="radio"]:checked~label,
+  .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;
-}
+}
--- a/less/TableStyles/fulldatatables.less
+++ b/less/TableStyles/fulldatatables.less
@@ -124,12 +124,13 @@ table.dataTable thead td:active {

 table.dataTable thead th:focus,
 table.dataTable thead td:focus {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #007ACC;
+    outline: 1px dashed #605E5C;
+    outline-offset: -2px;
    /*[{datatable-header-cell-focus-background}]*/
 }
-
+table.dataTable tbody tr:focus{
+    outline: 1px dashed #605E5C;
+}
 table.dataTable thead th:hover,
 table.dataTable thead td:hover {
    border: 1px solid #007ACC;
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2646,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();
 }
--- a/less/documentDBFabric.less
+++ b/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%);
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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.32.1",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
    "@microsoft/applicationinsights-web": "2.6.1",
@@ -140,7 +141,7 @@
    "buffer": "5.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "create-file-webpack": "1.0.2",
-    "css-loader": "1.0.0",
+    "css-loader": "6.8.1",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.5",
    "enzyme-to-json": "3.6.1",
@@ -169,7 +170,7 @@
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
    "playwright": "1.13.0",
-    "prettier": "2.2.1",
+    "prettier": "3.0.3",
    "process": "0.11.10",
    "raw-loader": "0.5.1",
    "react-dev-utils": "11.0.4",
@@ -177,8 +178,6 @@
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
    "ts-loader": "9.2.4",
-    "tslint": "5.11.0",
-    "tslint-microsoft-contrib": "6.0.0",
    "typedoc": "0.20.36",
    "typescript": "4.3.4",
    "url-loader": "1.1.1",
@@ -198,6 +197,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/",
@@ -208,7 +208,7 @@
    "compile:strict": "tsc -p ./tsconfig.strict.json",
    "format": "prettier --write \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
    "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
-    "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
    "build:contracts": "npm run compile:contracts",
    "strict:find": "node ./strict-null-checks/find.js",
    "strict:add": "node ./strict-null-checks/auto-add.js",
@@ -231,6 +231,7 @@
  },
  "homepage": "https://github.com/Azure/cosmos-explorer",
  "prettier": {
-    "printWidth": 120
+    "printWidth": 120,
+    "endOfLine": "auto"
  }
-}
+}
--- a/src/Bindings/BindingHandlersRegisterer.ts
+++ b/src/Bindings/BindingHandlersRegisterer.ts
@@ -10,7 +10,7 @@ export class BindingHandlersRegisterer {
        wrappedValueAccessor: () => any,
        allBindings?: ko.AllBindings,
        viewModel?: any,
-        bindingContext?: ko.BindingContext
+        bindingContext?: ko.BindingContext,
      ) {
        const value = ko.unwrap(wrappedValueAccessor());
        bindingContext?.$data.isTemplateReady(value);
--- a/src/Bindings/ReactBindingHandler.ts
+++ b/src/Bindings/ReactBindingHandler.ts
@@ -31,7 +31,7 @@ export class Registerer {

        // If any of the ko observable change inside parameters, trigger a new render.
        ko.computed(() => ko.toJSON(adapter.parameters)).subscribe(() =>
-          ReactDOM.render(adapter.renderComponent(), element)
+          ReactDOM.render(adapter.renderComponent(), element),
        );

        // Initial rendering at mount point
--- a/src/CellOutputViewer/CellOutputViewer.tsx
+++ b/src/CellOutputViewer/CellOutputViewer.tsx
@@ -66,7 +66,7 @@ const onInit = async () => {
      );

      ReactDOM.render(outputs, document.getElementById("cellOutput"));
-    }
+    },
  );

  postRobot.on(
@@ -89,14 +89,14 @@ const onInit = async () => {
        topNode,
        snapshotRequest.aspectRatio,
        undefined,
-        snapshotRequest.downloadFilename
+        snapshotRequest.downloadFilename,
      );

      return {
        imageSrc: result.imageSrc,
        requestId: snapshotRequest.requestId,
      };
-    }
+    },
  );
 };

--- a/src/CellOutputViewer/TransformMedia.tsx
+++ b/src/CellOutputViewer/TransformMedia.tsx
@@ -112,7 +112,7 @@ const getMediaInfo = (props: TransformMediaProps) => {
  const mediaType = displayOrder.find(
    (key) =>
      Object.prototype.hasOwnProperty.call(output.data, key) &&
-      (Object.prototype.hasOwnProperty.call(transformsById, key) || transformsById.get(key))
+      (Object.prototype.hasOwnProperty.call(transformsById, key) || transformsById.get(key)),
  );

  if (mediaType) {
--- a/src/CellOutputViewer/cellOutputViewer.html
+++ b/src/CellOutputViewer/cellOutputViewer.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -271,7 +271,7 @@ export class HashRoutePrefixes {
    databaseId: string,
    collectionId: string,
    sprocId: string,
-    stripFirstSlash: boolean = true
+    stripFirstSlash: boolean = true,
  ): string {
    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);

@@ -365,9 +365,6 @@ 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;
--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -66,7 +66,7 @@ describe("getTokenFromAuthService", () => {
    getTokenFromAuthService("GET", "dbs", "foo");
    expect(window.fetch).toHaveBeenCalledWith(
      "https://main.documentdb.ext.azure.com/api/guest/runtimeproxy/authorizationTokens",
-      expect.any(Object)
+      expect.any(Object),
    );
  });

@@ -77,7 +77,7 @@ describe("getTokenFromAuthService", () => {
    getTokenFromAuthService("GET", "dbs", "foo");
    expect(window.fetch).toHaveBeenCalledWith(
      "https://localhost:1234/api/guest/runtimeproxy/authorizationTokens",
-      expect.any(Object)
+      expect.any(Object),
    );
  });
 });
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -109,7 +109,7 @@ export function client(): Cosmos.CosmosClient {
    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
  }

-  if (userContext.features.enablePriorityBasedThrottling && userContext.apiType === "SQL") {
+  if (userContext.databaseAccount?.properties?.enablePriorityBasedExecution && userContext.apiType === "SQL") {
    const plugins = (options as any).plugins || [];
    plugins.push({ on: "request", plugin: PriorityBasedExecutionUtils.requestPlugin });
    (options as any).plugins = plugins;
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -1,5 +1,6 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
+import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";

 export interface TableEntityProps {
  entityValueLabel?: string;
@@ -58,6 +59,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      placeholder={entityValuePlaceholder}
      value={typeof entityValue === "string" ? entityValue : ""}
      onChange={onEntityValueChange}
+      ariaLabel={attributeValueLabel}
    />
  );
 };
--- a/src/Common/Logger.ts
+++ b/src/Common/Logger.ts
@@ -53,7 +53,7 @@ function _generateLogEntry(
  level: Diagnostics.LogEntryLevel,
  message: string,
  area: string,
-  code?: number | string
+  code?: number | string,
 ): Diagnostics.LogEntry {
  return {
    timestamp: new Date().getUTCSeconds(),
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -30,7 +30,7 @@ export function handleCachedDataMessage(message: any): void {
 export function sendCachedDataMessage<TResponseDataModel>(
  messageType: MessageTypes,
  params: Object[],
-  timeoutInMs?: number
+  timeoutInMs?: number,
 ): Q.Promise<TResponseDataModel> {
  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
    deferred: Q.defer<TResponseDataModel>(),
@@ -43,7 +43,7 @@ export function sendCachedDataMessage<TResponseDataModel>(
  //TODO: Use telemetry to measure optimal time to resolve/reject promises
  return cachedDataPromise.deferred.promise.timeout(
    timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
-    "Timed out while waiting for response from portal"
+    "Timed out while waiting for response from portal",
  );
 }

--- a/src/Common/MongoProxyClient.test.ts
+++ b/src/Common/MongoProxyClient.test.ts
@@ -38,7 +38,7 @@ const collection = {
  },
 } as Collection;

-const documentId = ({
+const documentId = {
  partitionKeyHeader: () => "[]",
  self: "db/testDB/db/testCollection/docs/testId",
  partitionKeyProperties,
@@ -47,7 +47,7 @@ const documentId = ({
    kind: "Hash",
    version: 1,
  },
-} as unknown) as DocumentId;
+} as unknown as DocumentId;

 const databaseAccount = {
  id: "foo",
@@ -83,7 +83,7 @@ describe("MongoProxyClient", () => {
      queryDocuments(databaseId, collection, true, "{}");
      expect(window.fetch).toHaveBeenCalledWith(
        "https://main.documentdb.ext.azure.com/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });

@@ -92,7 +92,7 @@ describe("MongoProxyClient", () => {
      queryDocuments(databaseId, collection, true, "{}");
      expect(window.fetch).toHaveBeenCalledWith(
        "https://localhost:1234/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });
  });
@@ -115,7 +115,7 @@ describe("MongoProxyClient", () => {
      readDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });

@@ -124,7 +124,7 @@ describe("MongoProxyClient", () => {
      readDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });
  });
@@ -147,7 +147,7 @@ describe("MongoProxyClient", () => {
      readDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });

@@ -156,7 +156,7 @@ describe("MongoProxyClient", () => {
      readDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });
  });
@@ -179,7 +179,7 @@ describe("MongoProxyClient", () => {
      updateDocument(databaseId, collection, documentId, "{}");
      expect(window.fetch).toHaveBeenCalledWith(
        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });

@@ -188,7 +188,7 @@ describe("MongoProxyClient", () => {
      updateDocument(databaseId, collection, documentId, "{}");
      expect(window.fetch).toHaveBeenCalledWith(
        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });
  });
@@ -211,7 +211,7 @@ describe("MongoProxyClient", () => {
      deleteDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });

@@ -220,7 +220,7 @@ describe("MongoProxyClient", () => {
      deleteDocument(databaseId, collection, documentId);
      expect(window.fetch).toHaveBeenCalledWith(
        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
-        expect.any(Object)
+        expect.any(Object),
      );
    });
  });
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -61,7 +61,7 @@ export function queryDocuments(
  collection: Collection,
  isResourceList: boolean,
  query: string,
-  continuationToken?: string
+  continuationToken?: string,
 ): Promise<QueryResponse> {
  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -121,7 +121,7 @@ export function queryDocuments(
 export function readDocument(
  databaseId: string,
  collection: Collection,
-  documentId: DocumentId
+  documentId: DocumentId,
 ): Promise<DataModels.DocumentId> {
  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -152,7 +152,7 @@ export function readDocument(
        ...defaultHeaders,
        ...authHeaders(),
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
-          JSON.stringify(documentId.partitionKeyHeader())
+          JSON.stringify(documentId.partitionKeyHeader()),
        ),
      },
    })
@@ -168,7 +168,7 @@ export function createDocument(
  databaseId: string,
  collection: Collection,
  partitionKeyProperty: string,
-  documentContent: unknown
+  documentContent: unknown,
 ): Promise<DataModels.DocumentId> {
  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -207,7 +207,7 @@ export function updateDocument(
  databaseId: string,
  collection: Collection,
  documentId: DocumentId,
-  documentContent: string
+  documentContent: string,
 ): Promise<DataModels.DocumentId> {
  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -290,7 +290,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
 }

 export function createMongoCollectionWithProxy(
-  params: DataModels.CreateCollectionParams
+  params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
  const { databaseAccount } = userContext;
  const shardKey: string = params.partitionKey?.paths[0];
@@ -316,7 +316,7 @@ export function createMongoCollectionWithProxy(
  return window
    .fetch(
      `${endpoint}/createCollection?${queryString.stringify(
-        (mongoParams as unknown) as queryString.ParsedUrlQueryInput
+        mongoParams as unknown as queryString.ParsedUrlQueryInput,
      )}`,
      {
        method: "POST",
@@ -325,7 +325,7 @@ export function createMongoCollectionWithProxy(
          ...authHeaders(),
          [HttpHeaders.contentType]: "application/json",
        },
-      }
+      },
    )
    .then(async (response) => {
      if (response.ok) {
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -48,7 +48,7 @@ export class QueriesClient {
        (error: any) => {
          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
          return Promise.reject(error);
-        }
+        },
      )
      .finally(() => clearMessage());
  }
@@ -83,7 +83,7 @@ export class QueriesClient {
          }
          handleError(error, "saveQuery", `Failed to save query ${query.queryName}`);
          return Promise.reject(error);
-        }
+        },
      )
      .finally(() => clearMessage());
  }
@@ -102,7 +102,7 @@ export class QueriesClient {
      SavedQueries.DatabaseName,
      SavedQueries.CollectionName,
      this.fetchQueriesQuery(),
-      options
+      options,
    ).fetchAll();

    let queries: DataModels.Query[] = _.map(results.resources, (document: DataModels.Query) => {
@@ -152,7 +152,7 @@ export class QueriesClient {
        partitionKeyProperties: ["id"],
      } as DocumentsTab,
      query,
-      [query.queryName]
+      [query.queryName],
    ); // TODO: Remove DocumentId's dependency on DocumentsTab
    const options: any = { partitionKey: query.resourceId };
    return deleteDocument(queriesCollection, documentId)
@@ -164,7 +164,7 @@ export class QueriesClient {
        (error: any) => {
          handleError(error, "deleteQuery", `Failed to delete query ${query.queryName}`);
          return Promise.reject(error);
-        }
+        },
      )
      .finally(() => clearMessage());
  }
@@ -178,14 +178,14 @@ export class QueriesClient {
  private findQueriesCollection(): ViewModels.Collection {
    const queriesDatabase: ViewModels.Database = _.find(
      useDatabases.getState().databases,
-      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
+      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName,
    );
    if (!queriesDatabase) {
      return undefined;
    }
    return _.find(
      queriesDatabase.collections(),
-      (collection: ViewModels.Collection) => collection.id() === SavedQueries.CollectionName
+      (collection: ViewModels.Collection) => collection.id() === SavedQueries.CollectionName,
    );
  }

--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -1,12 +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 {
@@ -76,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} />
        )}
--- a/src/Common/StyleConstants.ts
+++ b/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;
+  }
+}
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -12,6 +12,7 @@ import {
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";
+import { attributeNameLabel, dataTypeLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";
@@ -112,6 +113,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
          value={entityProperty}
          onChange={onEntityPropertyChange}
          required
+          ariaLabel={attributeNameLabel}
        />
        <Dropdown
          label={entityTypeLabel && entityTypeLabel}
@@ -120,6 +122,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
          options={options}
          disabled={isPropertyTypeDisable}
          styles={dropdownStyles}
+          ariaLabel={dataTypeLabel}
        />
        <EntityValue
          entityValueLabel={entityValueLabel}
--- a/src/Common/dataAccess/bulkCreateDocument.ts
+++ b/src/Common/dataAccess/bulkCreateDocument.ts
@@ -6,10 +6,10 @@ import { handleError } from "../ErrorHandlingUtils";

 export const bulkCreateDocument = async (
  collection: CollectionBase,
-  documents: JSONObject[]
+  documents: JSONObject[],
 ): Promise<OperationResponse[]> => {
  const clearMessage = logConsoleProgress(
-    `Executing ${documents.length} bulk operations for container ${collection.id()}`
+    `Executing ${documents.length} bulk operations for container ${collection.id()}`,
  );

  try {
@@ -18,7 +18,7 @@ export const bulkCreateDocument = async (
      .container(collection.id())
      .items.bulk(
        documents.map((doc) => ({ operationType: "Create", resourceBody: doc })),
-        { continueOnError: true }
+        { continueOnError: true },
      );

    const successCount = response.filter((r) => r.statusCode === 201).length;
@@ -27,7 +27,7 @@ export const bulkCreateDocument = async (
    logConsoleInfo(
      `${
        documents.length
-      } operations completed for container ${collection.id()}. ${successCount} operations succeeded. ${throttledCount} operations throttled`
+      } operations completed for container ${collection.id()}. ${successCount} operations succeeded. ${throttledCount} operations throttled`,
    );
    return response;
  } catch (error) {
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -20,7 +20,7 @@ import { createDatabase } from "./createDatabase";

 export const createCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
  const clearMessage = logConsoleProgress(
-    `Creating a new container ${params.collectionId} for database ${params.databaseId}`
+    `Creating a new container ${params.collectionId} for database ${params.databaseId}`,
  );
  try {
    let collection: DataModels.Collection;
@@ -57,7 +57,7 @@ const createCollectionWithARM = async (params: DataModels.CreateCollectionParams
    if (!isValid) {
      const collectionName = getCollectionName().toLocaleLowerCase();
      throw new Error(
-        `Create ${collectionName} failed: ${collectionName} with id ${params.collectionId} already exists`
+        `Create ${collectionName} failed: ${collectionName} with id ${params.collectionId} already exists`,
      );
    }
  }
@@ -110,7 +110,7 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
    userContext.databaseAccount.name,
    params.databaseId,
    params.collectionId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Collection);
 };
@@ -145,7 +145,7 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
    userContext.databaseAccount.name,
    params.databaseId,
    params.collectionId,
-    rpPayload
+    rpPayload,
  );

  if (params.createMongoWildcardIndex) {
@@ -179,7 +179,7 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
    userContext.databaseAccount.name,
    params.databaseId,
    params.collectionId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Collection);
 };
@@ -213,7 +213,7 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
    userContext.databaseAccount.name,
    params.databaseId,
    params.collectionId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Collection);
 };
@@ -236,7 +236,7 @@ const createTable = async (params: DataModels.CreateCollectionParams): Promise<D
    userContext.resourceGroup,
    userContext.databaseAccount.name,
    params.collectionId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Collection);
 };
@@ -287,7 +287,7 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
  const databaseResponse: DatabaseResponse = await client().databases.createIfNotExists(createDatabaseBody);
  const collectionResponse: ContainerResponse = await databaseResponse?.database.containers.create(
    createCollectionBody,
-    collectionOptions
+    collectionOptions,
  );
  return collectionResponse?.resource as DataModels.Collection;
 };
--- a/src/Common/dataAccess/createDatabase.ts
+++ b/src/Common/dataAccess/createDatabase.ts
@@ -77,7 +77,7 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
    userContext.resourceGroup,
    userContext.databaseAccount.name,
    params.databaseId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Database);
 }
@@ -97,7 +97,7 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
    userContext.resourceGroup,
    userContext.databaseAccount.name,
    params.databaseId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Database);
 }
@@ -117,7 +117,7 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
    userContext.resourceGroup,
    userContext.databaseAccount.name,
    params.databaseId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Database);
 }
@@ -137,7 +137,7 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
    userContext.resourceGroup,
    userContext.databaseAccount.name,
    params.databaseId,
-    rpPayload
+    rpPayload,
  );
  return createResponse && (createResponse.properties.resource as DataModels.Database);
 }
--- a/src/Common/dataAccess/createStoredProcedure.ts
+++ b/src/Common/dataAccess/createStoredProcedure.ts
@@ -16,7 +16,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function createStoredProcedure(
  databaseId: string,
  collectionId: string,
-  storedProcedure: StoredProcedureDefinition
+  storedProcedure: StoredProcedureDefinition,
 ): Promise<StoredProcedureDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
  try {
@@ -32,11 +32,11 @@ export async function createStoredProcedure(
          userContext.databaseAccount.name,
          databaseId,
          collectionId,
-          storedProcedure.id
+          storedProcedure.id,
        );
        if (getResponse?.properties?.resource) {
          throw new Error(
-            `Create stored procedure failed: stored procedure with id ${storedProcedure.id} already exists`
+            `Create stored procedure failed: stored procedure with id ${storedProcedure.id} already exists`,
          );
        }
      } catch (error) {
@@ -58,7 +58,7 @@ export async function createStoredProcedure(
        databaseId,
        collectionId,
        storedProcedure.id,
-        createSprocParams
+        createSprocParams,
      );
      return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
    }
--- a/src/Common/dataAccess/createTrigger.ts
+++ b/src/Common/dataAccess/createTrigger.ts
@@ -10,7 +10,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function createTrigger(
  databaseId: string,
  collectionId: string,
-  trigger: SqlTriggerResource
+  trigger: SqlTriggerResource,
 ): Promise<TriggerDefinition | SqlTriggerResource> {
  const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
  try {
@@ -26,7 +26,7 @@ export async function createTrigger(
          userContext.databaseAccount.name,
          databaseId,
          collectionId,
-          trigger.id
+          trigger.id,
        );
        if (getResponse?.properties?.resource) {
          throw new Error(`Create trigger failed: ${trigger.id} already exists`);
@@ -50,7 +50,7 @@ export async function createTrigger(
        databaseId,
        collectionId,
        trigger.id,
-        createTriggerParams
+        createTriggerParams,
      );
      return rpResponse && rpResponse.properties?.resource;
    }
@@ -58,7 +58,7 @@ export async function createTrigger(
    const response = await client()
      .database(databaseId)
      .container(collectionId)
-      .scripts.triggers.create((trigger as unknown) as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
+      .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
    return response.resource;
  } catch (error) {
    handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);
--- a/src/Common/dataAccess/createUserDefinedFunction.ts
+++ b/src/Common/dataAccess/createUserDefinedFunction.ts
@@ -16,7 +16,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function createUserDefinedFunction(
  databaseId: string,
  collectionId: string,
-  userDefinedFunction: UserDefinedFunctionDefinition
+  userDefinedFunction: UserDefinedFunctionDefinition,
 ): Promise<UserDefinedFunctionDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
  try {
@@ -32,11 +32,11 @@ export async function createUserDefinedFunction(
          userContext.databaseAccount.name,
          databaseId,
          collectionId,
-          userDefinedFunction.id
+          userDefinedFunction.id,
        );
        if (getResponse?.properties?.resource) {
          throw new Error(
-            `Create user defined function failed: user defined function with id ${userDefinedFunction.id} already exists`
+            `Create user defined function failed: user defined function with id ${userDefinedFunction.id} already exists`,
          );
        }
      } catch (error) {
@@ -58,7 +58,7 @@ export async function createUserDefinedFunction(
        databaseId,
        collectionId,
        userDefinedFunction.id,
-        createUDFParams
+        createUDFParams,
      );
      return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
    }
@@ -72,7 +72,7 @@ export async function createUserDefinedFunction(
    handleError(
      error,
      "CreateUserupdateUserDefinedFunction",
-      `Error while creating user defined function ${userDefinedFunction.id}`
+      `Error while creating user defined function ${userDefinedFunction.id}`,
    );
    throw error;
  } finally {
--- a/src/Common/dataAccess/deleteStoredProcedure.ts
+++ b/src/Common/dataAccess/deleteStoredProcedure.ts
@@ -8,7 +8,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteStoredProcedure(
  databaseId: string,
  collectionId: string,
-  storedProcedureId: string
+  storedProcedureId: string,
 ): Promise<void> {
  const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
  try {
@@ -23,7 +23,7 @@ export async function deleteStoredProcedure(
        userContext.databaseAccount.name,
        databaseId,
        collectionId,
-        storedProcedureId
+        storedProcedureId,
      );
    } else {
      await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
--- a/src/Common/dataAccess/deleteTrigger.ts
+++ b/src/Common/dataAccess/deleteTrigger.ts
@@ -19,7 +19,7 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
        userContext.databaseAccount.name,
        databaseId,
        collectionId,
-        triggerId
+        triggerId,
      );
    } else {
      await client().database(databaseId).container(collectionId).scripts.trigger(triggerId).delete();
--- a/src/Common/dataAccess/deleteUserDefinedFunction.ts
+++ b/src/Common/dataAccess/deleteUserDefinedFunction.ts
@@ -19,7 +19,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
        userContext.databaseAccount.name,
        databaseId,
        collectionId,
-        id
+        id,
      );
    } else {
      await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
--- a/src/Common/dataAccess/executeStoredProcedure.ts
+++ b/src/Common/dataAccess/executeStoredProcedure.ts
@@ -14,7 +14,7 @@ export const executeStoredProcedure = async (
  collection: Collection,
  storedProcedure: StoredProcedure,
  partitionKeyValue: string,
-  params: string[]
+  params: string[],
 ): Promise<ExecuteSprocResult> => {
  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
  const timeout = setTimeout(() => {
@@ -29,7 +29,7 @@ export const executeStoredProcedure = async (
      .execute(partitionKeyValue, params, { enableScriptLogging: true });
    clearTimeout(timeout);
    logConsoleInfo(
-      `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+      `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`,
    );
    return {
      result: response.resource,
@@ -39,7 +39,7 @@ export const executeStoredProcedure = async (
    handleError(
      error,
      "ExecuteStoredProcedure",
-      `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+      `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`,
    );
    throw error;
  } finally {
--- a/src/Common/dataAccess/getIndexTransformationProgress.ts
+++ b/src/Common/dataAccess/getIndexTransformationProgress.ts
@@ -15,7 +15,7 @@ export async function getIndexTransformationProgress(databaseId: string, collect
    const response = await client().database(databaseId).container(collectionId).read({ populateQuotaInfo: true });

    indexTransformationPercentage = parseInt(
-      response.headers[Constants.HttpHeaders.collectionIndexTransformationProgress] as string
+      response.headers[Constants.HttpHeaders.collectionIndexTransformationProgress] as string,
    );
  } catch (error) {
    handleError(error, "ReadMongoDBCollection", `Error while reading container ${collectionId}`);
--- a/src/Common/dataAccess/queryConflicts.ts
+++ b/src/Common/dataAccess/queryConflicts.ts
@@ -5,7 +5,7 @@ export const queryConflicts = (
  databaseId: string,
  containerId: string,
  query: string,
-  options: FeedOptions
+  options: FeedOptions,
 ): QueryIterator<ConflictDefinition & Resource> => {
  return client().database(databaseId).container(containerId).conflicts.query(query, options);
 };
--- a/src/Common/dataAccess/queryDocuments.ts
+++ b/src/Common/dataAccess/queryDocuments.ts
@@ -7,7 +7,7 @@ export const queryDocuments = (
  databaseId: string,
  containerId: string,
  query: string,
-  options: FeedOptions
+  options: FeedOptions,
 ): QueryIterator<ItemDefinition & Resource> => {
  options = getCommonQueryOptions(options);
  return client().database(databaseId).container(containerId).items.query(query, options);
--- a/src/Common/dataAccess/queryDocumentsPage.ts
+++ b/src/Common/dataAccess/queryDocumentsPage.ts
@@ -7,7 +7,7 @@ import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
 export const queryDocumentsPage = async (
  resourceName: string,
  documentsIterator: MinimalQueryIterator,
-  firstItemIndex: number
+  firstItemIndex: number,
 ): Promise<QueryResults> => {
  const entityName = getEntityName();
  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
--- a/src/Common/dataAccess/readCollection.ts
+++ b/src/Common/dataAccess/readCollection.ts
@@ -28,7 +28,7 @@ export async function readSampleCollection(): Promise<DataModels.Collection> {
 export async function readCollectionInternal(
  cosmosClient: CosmosClient,
  databaseId: string,
-  collectionId: string
+  collectionId: string,
 ): Promise<DataModels.Collection> {
  let collection: DataModels.Collection;
  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
--- a/src/Common/dataAccess/readCollectionOffer.ts
+++ b/src/Common/dataAccess/readCollectionOffer.ts
@@ -44,7 +44,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
          resourceGroup,
          accountName,
          databaseId,
-          collectionId
+          collectionId,
        );
        break;
      case "Mongo":
@@ -53,7 +53,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
          resourceGroup,
          accountName,
          databaseId,
-          collectionId
+          collectionId,
        );
        break;
      case "Cassandra":
@@ -62,7 +62,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
          resourceGroup,
          accountName,
          databaseId,
-          collectionId
+          collectionId,
        );
        break;
      case "Gremlin":
@@ -71,7 +71,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
          resourceGroup,
          accountName,
          databaseId,
-          collectionId
+          collectionId,
        );
        break;
      case "Tables":
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -34,7 +34,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co

 export async function readCollectionsWithPagination(
  databaseId: string,
-  continuationToken?: string
+  continuationToken?: string,
 ): Promise<DataModels.CollectionsWithPagination> {
  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
  try {
@@ -45,7 +45,7 @@ export async function readCollectionsWithPagination(
        {
          continuationToken,
          maxItemCount: Queries.containersPerPage,
-        }
+        },
      )
      .fetchNext();
    const collectionsWithPagination: DataModels.CollectionsWithPagination = {
--- a/src/Common/dataAccess/readMongoDBCollection.tsx
+++ b/src/Common/dataAccess/readMongoDBCollection.tsx
@@ -7,7 +7,7 @@ import { handleError } from "../ErrorHandlingUtils";

 export async function readMongoDBCollectionThroughRP(
  databaseId: string,
-  collectionId: string
+  collectionId: string,
 ): Promise<MongoDBCollectionResource> {
  if (userContext.authType !== AuthType.AAD) {
    return undefined;
--- a/src/Common/dataAccess/readStoredProcedures.ts
+++ b/src/Common/dataAccess/readStoredProcedures.ts
@@ -9,7 +9,7 @@ import { handleError } from "../ErrorHandlingUtils";

 export async function readStoredProcedures(
  databaseId: string,
-  collectionId: string
+  collectionId: string,
 ): Promise<(StoredProcedureDefinition & Resource)[]> {
  const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
  try {
@@ -23,7 +23,7 @@ export async function readStoredProcedures(
        userContext.resourceGroup,
        userContext.databaseAccount.name,
        databaseId,
-        collectionId
+        collectionId,
      );
      const listResult = rpResponse as SqlStoredProcedureListResult;
      if (listResult) {
--- a/src/Common/dataAccess/readTriggers.ts
+++ b/src/Common/dataAccess/readTriggers.ts
@@ -9,7 +9,7 @@ import { handleError } from "../ErrorHandlingUtils";

 export async function readTriggers(
  databaseId: string,
-  collectionId: string
+  collectionId: string,
 ): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
  const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
  try {
@@ -23,7 +23,7 @@ export async function readTriggers(
        userContext.resourceGroup,
        userContext.databaseAccount.name,
        databaseId,
-        collectionId
+        collectionId,
      );
      return rpResponse?.value?.map((trigger) => trigger.properties?.resource);
    }
--- a/src/Common/dataAccess/readUserDefinedFunctions.ts
+++ b/src/Common/dataAccess/readUserDefinedFunctions.ts
@@ -8,7 +8,7 @@ import { handleError } from "../ErrorHandlingUtils";

 export async function readUserDefinedFunctions(
  databaseId: string,
-  collectionId: string
+  collectionId: string,
 ): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
  const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
@@ -19,7 +19,7 @@ export async function readUserDefinedFunctions(
        resourceGroup,
        databaseAccount.name,
        databaseId,
-        collectionId
+        collectionId,
      );
      return rpResponse?.value?.map((udf) => udf.properties?.resource as UserDefinedFunctionDefinition & Resource);
    }
@@ -34,7 +34,7 @@ export async function readUserDefinedFunctions(
    handleError(
      error,
      "ReadUserDefinedFunctions",
-      `Failed to query user defined functions for container ${collectionId}`
+      `Failed to query user defined functions for container ${collectionId}`,
    );
    throw error;
  } finally {
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -27,7 +27,7 @@ export async function updateCollection(
  databaseId: string,
  collectionId: string,
  newCollection: Partial<Collection>,
-  options: RequestOptions = {}
+  options: RequestOptions = {},
 ): Promise<Collection> {
  let collection: Collection;
  const clearMessage = logConsoleProgress(`Updating container ${collectionId}`);
@@ -61,7 +61,7 @@ export async function updateCollection(
 async function updateCollectionWithARM(
  databaseId: string,
  collectionId: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
  const accountName = databaseAccount.name;
@@ -82,7 +82,7 @@ async function updateCollectionWithARM(
        subscriptionId,
        resourceGroup,
        accountName,
-        newCollection
+        newCollection,
      );
    default:
      throw new Error(`Unsupported default experience type: ${apiType}`);
@@ -95,7 +95,7 @@ async function updateSqlContainer(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -106,7 +106,7 @@ async function updateSqlContainer(
      accountName,
      databaseId,
      collectionId,
-      getResponse as SqlContainerCreateUpdateParameters
+      getResponse as SqlContainerCreateUpdateParameters,
    );
    return updateResponse && (updateResponse.properties.resource as Collection);
  }
@@ -120,7 +120,7 @@ export async function updateMongoDBCollection(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -131,13 +131,13 @@ export async function updateMongoDBCollection(
      accountName,
      databaseId,
      collectionId,
-      getResponse as MongoDBCollectionCreateUpdateParameters
+      getResponse as MongoDBCollectionCreateUpdateParameters,
    );
    return updateResponse && (updateResponse.properties.resource as Collection);
  }

  throw new Error(
-    `MongoDB collection to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`
+    `MongoDB collection to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`,
  );
 }

@@ -147,7 +147,7 @@ async function updateCassandraTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -158,13 +158,13 @@ async function updateCassandraTable(
      accountName,
      databaseId,
      collectionId,
-      getResponse as SqlContainerCreateUpdateParameters
+      getResponse as SqlContainerCreateUpdateParameters,
    );
    return updateResponse && (updateResponse.properties.resource as Collection);
  }

  throw new Error(
-    `Cassandra table to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`
+    `Cassandra table to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`,
  );
 }

@@ -174,7 +174,7 @@ async function updateGremlinGraph(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -185,7 +185,7 @@ async function updateGremlinGraph(
      accountName,
      databaseId,
      collectionId,
-      getResponse as SqlContainerCreateUpdateParameters
+      getResponse as SqlContainerCreateUpdateParameters,
    );
    return updateResponse && (updateResponse.properties.resource as Collection);
  }
@@ -198,7 +198,7 @@ async function updateTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Partial<Collection>,
 ): Promise<Collection> {
  const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -208,7 +208,7 @@ async function updateTable(
      resourceGroup,
      accountName,
      collectionId,
-      getResponse as SqlContainerCreateUpdateParameters
+      getResponse as SqlContainerCreateUpdateParameters,
    );
    return updateResponse && (updateResponse.properties.resource as Collection);
  }
--- a/src/Common/dataAccess/updateDocument.ts
+++ b/src/Common/dataAccess/updateDocument.ts
@@ -11,7 +11,7 @@ import { getPartitionKeyValue } from "./getPartitionKeyValue";
 export const updateDocument = async (
  collection: CollectionBase,
  documentId: DocumentId,
-  newDocument: Item
+  newDocument: Item,
 ): Promise<Item> => {
  const entityName = getEntityName();
  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
--- a/src/Common/dataAccess/updateOffer.ts
+++ b/src/Common/dataAccess/updateOffer.ts
@@ -152,7 +152,7 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void>
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else if (params.migrateToManual) {
    await migrateSqlContainerToManualThroughput(
@@ -160,7 +160,7 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void>
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else {
    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
@@ -170,7 +170,7 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void>
      accountName,
      params.databaseId,
      params.collectionId,
-      body
+      body,
    );
  }
 };
@@ -185,7 +185,7 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<vo
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else if (params.migrateToManual) {
    await migrateMongoDBCollectionToManualThroughput(
@@ -193,7 +193,7 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<vo
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else {
    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
@@ -203,7 +203,7 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<vo
      accountName,
      params.databaseId,
      params.collectionId,
-      body
+      body,
    );
  }
 };
@@ -218,7 +218,7 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<voi
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else if (params.migrateToManual) {
    await migrateCassandraTableToManualThroughput(
@@ -226,7 +226,7 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<voi
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else {
    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
@@ -236,7 +236,7 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<voi
      accountName,
      params.databaseId,
      params.collectionId,
-      body
+      body,
    );
  }
 };
@@ -251,7 +251,7 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void>
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else if (params.migrateToManual) {
    await migrateGremlinGraphToManualThroughput(
@@ -259,7 +259,7 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void>
      resourceGroup,
      accountName,
      params.databaseId,
-      params.collectionId
+      params.collectionId,
    );
  } else {
    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
@@ -269,7 +269,7 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void>
      accountName,
      params.databaseId,
      params.collectionId,
-      body
+      body,
    );
  }
 };
@@ -404,7 +404,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
  const sdkResponse = await client()
    .offer(params.currentOffer.id)
    // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
-    .replace((newOffer as unknown) as OfferDefinition, options);
+    .replace(newOffer as unknown as OfferDefinition, options);

  return parseSDKOfferResponse(sdkResponse);
 };
--- a/src/Common/dataAccess/updateStoredProcedure.ts
+++ b/src/Common/dataAccess/updateStoredProcedure.ts
@@ -16,7 +16,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function updateStoredProcedure(
  databaseId: string,
  collectionId: string,
-  storedProcedure: StoredProcedureDefinition
+  storedProcedure: StoredProcedureDefinition,
 ): Promise<StoredProcedureDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
  try {
@@ -29,7 +29,7 @@ export async function updateStoredProcedure(
        databaseAccount.name,
        databaseId,
        collectionId,
-        storedProcedure.id
+        storedProcedure.id,
      );

      if (getResponse?.properties?.resource) {
@@ -46,7 +46,7 @@ export async function updateStoredProcedure(
          databaseId,
          collectionId,
          storedProcedure.id,
-          createSprocParams
+          createSprocParams,
        );
        return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
      }
--- a/src/Common/dataAccess/updateTrigger.ts
+++ b/src/Common/dataAccess/updateTrigger.ts
@@ -10,7 +10,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function updateTrigger(
  databaseId: string,
  collectionId: string,
-  trigger: SqlTriggerResource
+  trigger: SqlTriggerResource,
 ): Promise<SqlTriggerResource | TriggerDefinition> {
  const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
@@ -22,7 +22,7 @@ export async function updateTrigger(
        databaseAccount.name,
        databaseId,
        collectionId,
-        trigger.id
+        trigger.id,
      );

      if (getResponse?.properties?.resource) {
@@ -39,7 +39,7 @@ export async function updateTrigger(
          databaseId,
          collectionId,
          trigger.id,
-          createTriggerParams
+          createTriggerParams,
        );
        return rpResponse && rpResponse.properties?.resource;
      }
@@ -51,7 +51,7 @@ export async function updateTrigger(
      .database(databaseId)
      .container(collectionId)
      .scripts.trigger(trigger.id)
-      .replace((trigger as unknown) as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
+      .replace(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
    return response?.resource;
  } catch (error) {
    handleError(error, "UpdateTrigger", `Error while updating trigger ${trigger.id}`);
--- a/src/Common/dataAccess/updateUserDefinedFunction.ts
+++ b/src/Common/dataAccess/updateUserDefinedFunction.ts
@@ -16,7 +16,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function updateUserDefinedFunction(
  databaseId: string,
  collectionId: string,
-  userDefinedFunction: UserDefinedFunctionDefinition
+  userDefinedFunction: UserDefinedFunctionDefinition,
 ): Promise<UserDefinedFunctionDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
@@ -28,7 +28,7 @@ export async function updateUserDefinedFunction(
        databaseAccount.name,
        databaseId,
        collectionId,
-        userDefinedFunction.id
+        userDefinedFunction.id,
      );

      if (getResponse?.properties?.resource) {
@@ -45,7 +45,7 @@ export async function updateUserDefinedFunction(
          databaseId,
          collectionId,
          userDefinedFunction.id,
-          createUDFParams
+          createUDFParams,
        );
        return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
      }
@@ -63,7 +63,7 @@ export async function updateUserDefinedFunction(
    handleError(
      error,
      "UpdateUserupdateUserDefinedFunction",
-      `Error while updating user defined function ${userDefinedFunction.id}`
+      `Error while updating user defined function ${userDefinedFunction.id}`,
    );
    throw error;
  } finally {
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -16,6 +16,7 @@ export enum Platform {
  Portal = "Portal",
  Hosted = "Hosted",
  Emulator = "Emulator",
+  Fabric = "Fabric",
 }

 export interface ConfigContext {
@@ -60,6 +61,9 @@ let configContext: Readonly<ConfigContext> = {
    `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
    `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
    `^https:\\/\\/cosmos-db-dataexplorer-germanycentral\\.azurewebsites\\.de$`,
+    `^https:\\/\\/.*\\.fabric\\.microsoft\\.com$`,
+    `^https:\\/\\/.*\\.powerbi\\.com$`,
+    `^https:\\/\\/.*\\.analysis-df\\.net$`,
  ], // Webpack injects this at build time
  gitSha: process.env.GIT_SHA,
  hostedExplorerURL: "https://cosmos.azure.com/",
@@ -67,7 +71,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",
@@ -114,7 +118,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
  if (
    !validateEndpoint(
      newContext.BACKEND_ENDPOINT,
-      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
    )
  ) {
    delete newContext.BACKEND_ENDPOINT;
@@ -187,6 +191,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 });
--- a/src/Contracts/DataModels.ts
+++ b/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;
 }
@@ -35,6 +38,8 @@ export interface DatabaseAccountExtendedProperties {
  locations?: DatabaseAccountResponseLocation[];
  postgresqlEndpoint?: string;
  publicNetworkAccess?: string;
+  enablePriorityBasedExecution?: boolean;
+  vcoreMongoEndpoint?: string;
 }

 export interface DatabaseAccountResponseLocation {
@@ -575,7 +580,7 @@ export interface ContainerConnectionInfo {
  //need to add ram and rom info
 }

-export interface PostgresFirewallRule {
+export interface FirewallRule {
  id: string;
  name: string;
  type: string;
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -39,6 +39,8 @@ export enum MessageTypes {
  OpenPostgresNetworkingBlade,
  OpenCosmosDBNetworkingBlade,
  DisplayNPSSurvey,
+  OpenVCoreMongoNetworkingBlade,
+  OpenVCoreMongoConnectionStringsBlade,
 }

-export { Versions, ActionContracts, Diagnostics };
+export { ActionContracts, Diagnostics, Versions };
--- a/src/Contracts/FabricContract.ts
+++ b/src/Contracts/FabricContract.ts
@@ -0,0 +1,25 @@
+export type FabricMessage =
+  | {
+      type: "newContainer";
+      databaseName: string;
+    }
+  | {
+      type: "initialize";
+      connectionString: string | undefined;
+    }
+  | {
+      type: "openTab";
+      databaseName: string;
+      collectionName: string | undefined;
+    };
+
+export type DataExploreMessage =
+  | "ready"
+  | {
+      type: number;
+      data: {
+        action: "LoadDatabases";
+        actionModifier: "success" | "start";
+        defaultExperience: "SQL";
+      };
+    };
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -372,6 +372,7 @@ export enum TerminalKind {
  Mongo = 1,
  Cassandra = 2,
  Postgres = 3,
+  VCoreMongo = 4,
 }

 export interface DataExplorerInputsFrame {
@@ -397,6 +398,7 @@ export interface DataExplorerInputsFrame {
  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;
--- a/src/Controls/Heatmap/Heatmap.html
+++ b/src/Controls/Heatmap/Heatmap.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/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";
@@ -191,7 +191,7 @@ export class Heatmap {
      Heatmap.elementId,
      this._getChartSettings(),
      this._getLayoutSettings(),
-      this._getChartDisplaySettings()
+      this._getChartDisplaySettings(),
    );
    const plotDiv: any = document.getElementById(Heatmap.elementId);
    plotDiv.on("plotly_click", (data: any) => {
--- a/src/Definitions/datatables.d.ts
+++ b/src/Definitions/datatables.d.ts
@@ -41,7 +41,7 @@ declare namespace DataTables {
     */
    cell(
      cellSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
-      modifier?: ObjectSelectorModifier
+      modifier?: ObjectSelectorModifier,
    ): CellMethods;

    /**
@@ -54,7 +54,7 @@ declare namespace DataTables {
    cell(
      rowSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
      cellSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
-      modifier?: ObjectSelectorModifier
+      modifier?: ObjectSelectorModifier,
    ): CellMethods;

    /**
@@ -72,7 +72,7 @@ declare namespace DataTables {
     */
    cells(
      cellSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
-      modifier?: ObjectSelectorModifier
+      modifier?: ObjectSelectorModifier,
    ): CellsMethods;

    /**
@@ -85,7 +85,7 @@ declare namespace DataTables {
    cells(
      rowSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
      cellSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
-      modifier?: ObjectSelectorModifier
+      modifier?: ObjectSelectorModifier,
    ): CellsMethods;
    //#endregion "Cell/Cells"

@@ -125,7 +125,7 @@ declare namespace DataTables {
     * @param tableSelector Table selector.
     */
    table(
-      tableSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[]
+      tableSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
    ): TableMethods;

    /**
@@ -139,7 +139,7 @@ declare namespace DataTables {
     * @param tableSelector Table selector.
     */
    tables(
-      tableSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[]
+      tableSelector: (string | Node | Function | JQuery | Object) | (string | Node | Function | JQuery | Object)[],
    ): TablesMethods;

    //#endregion "Table/Tables"
--- a/src/Definitions/jquery-ui.d.ts
+++ b/src/Definitions/jquery-ui.d.ts
@@ -1001,7 +1001,7 @@ interface JQuery {
    date: Date,
    onSelect?: () => void,
    settings?: JQueryUI.DatepickerOptions,
-    pos?: number[]
+    pos?: number[],
  ): JQuery;
  /**
   * Opens the datepicker in a dialog box.
@@ -1017,7 +1017,7 @@ interface JQuery {
    date: Date,
    onSelect?: () => void,
    settings?: JQueryUI.DatepickerOptions,
-    pos?: MouseEvent
+    pos?: MouseEvent,
  ): JQuery;
  /**
   * Opens the datepicker in a dialog box.
@@ -1033,7 +1033,7 @@ interface JQuery {
    date: string,
    onSelect?: () => void,
    settings?: JQueryUI.DatepickerOptions,
-    pos?: number[]
+    pos?: number[],
  ): JQuery;
  /**
   * Opens the datepicker in a dialog box.
@@ -1049,7 +1049,7 @@ interface JQuery {
    date: string,
    onSelect?: () => void,
    settings?: JQueryUI.DatepickerOptions,
-    pos?: MouseEvent
+    pos?: MouseEvent,
  ): JQuery;
  /**
   * Returns the current date for the datepicker or null if no date has been selected.
@@ -1199,7 +1199,7 @@ interface JQuery {
  datepicker(
    methodName: "option",
    optionName: "beforeShow",
-    beforeShowValue: (input: Element, inst: any) => JQueryUI.DatepickerOptions
+    beforeShowValue: (input: Element, inst: any) => JQueryUI.DatepickerOptions,
  ): JQuery;

  /**
@@ -1716,14 +1716,14 @@ interface JQuery {
    addClassName: string,
    duration?: number,
    easing?: string,
-    complete?: Function
+    complete?: Function,
  ): JQuery;
  switchClass(
    removeClassName: string,
    addClassName: string,
    duration?: string,
    easing?: string,
-    complete?: Function
+    complete?: Function,
  ): JQuery;

  toggleClass(className: string, duration?: number, easing?: string, complete?: Function): JQuery;
--- a/src/Definitions/jquery.d.ts
+++ b/src/Definitions/jquery.d.ts
@@ -80,25 +80,25 @@ interface JQueryXHR<T> extends XMLHttpRequest {
  then(
    doneCallbacks: JQueryPromiseXHRDoneCallback<T>,
    failCallbacks?: JQueryPromiseXHRFailCallback<T>,
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;

  then<UValue>(
    doneCallbacks: { (data: T, textStatus: string, jqXHR: JQueryXHR<T>): UValue },
    failCallbacks?: JQueryPromiseXHRFailCallback<T>,
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UValue, UReject>(
    doneCallbacks: { (data: T, textStatus: string, jqXHR: JQueryXHR<T>): UValue },
    failCallbacks?: { (data: T, textStatus: string, jqXHR: JQueryXHR<T>): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  then<UReject>(
    doneCallbacks: JQueryPromiseXHRDoneCallback<T>,
    failCallbacks?: { (data: T, textStatus: string, jqXHR: JQueryXHR<T>): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  overrideMimeType(mimeType: string): void;
@@ -201,7 +201,7 @@ interface JQueryPromiseAny {
  then(
    doneCallbacks: { (...args: any[]): any },
    failCallbacks: { (...args: any[]): any },
-    progressCallbacks?: { (...args: any[]): any }
+    progressCallbacks?: { (...args: any[]): any },
  ): JQueryPromiseAny;
 }

@@ -215,39 +215,39 @@ interface JQueryPromise {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (): JQueryPromiseV<UValue> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then(
    doneCallbacks: { (): JQueryDeferred },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;

  then(
    doneCallbacks: { (): JQueryPromise },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;

  // U Value
  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(doneCallbacks: { (): void }, failCallbacks?: { (): void }, progressCallbacks?: { (): void }): JQueryPromise;
@@ -263,39 +263,39 @@ interface JQueryPromiseV<TValue> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredV<UValue> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseV<UValue> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -309,39 +309,39 @@ interface JQueryPromiseN<TNotify> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then(
    doneCallbacks: { (): JQueryDeferredN<TNotify> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseN<TNotify>;

  then(
    doneCallbacks: { (): JQueryPromiseN<TNotify> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseN<TNotify>;

  // U Value
  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromise;
 }

@@ -357,25 +357,25 @@ interface JQueryPromiseNNNN<TNotify1, TNotify2, TNotify3, TNotify4> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseVR<UValue, UReject>;

  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromise;
 }

@@ -389,39 +389,39 @@ interface JQueryPromiseVV<TValue1, TValue2> {
  then<UValue, UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue1, UValue2>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): JQueryDeferredVV<UValue1, UValue2> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVV<UValue1, UValue2>;

  then<UValue1, UValue2>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): JQueryPromiseVV<UValue1, UValue2> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVV<UValue1, UValue2>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -437,39 +437,39 @@ interface JQueryPromiseVVV<TValue1, TValue2, TValue3> {
  then<UValue, UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue1, UValue2, UValue3>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): JQueryDeferredVVV<UValue1, UValue2, UValue3> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVVV<UValue1, UValue2, UValue3>;

  then<UValue1, UValue2, UValue3>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): JQueryPromiseVVV<UValue1, UValue2, UValue3> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVVV<UValue1, UValue2, UValue3>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -483,45 +483,45 @@ interface JQueryPromiseVR<TValue, TReject> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): JQueryPromiseVR<UValue, UReject> },
    failCallbacks?: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredVR<UValue, TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, TReject>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseVR<UValue, TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, TReject>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -535,39 +535,39 @@ interface JQueryPromiseVRN<TValue, TReject, TProgress> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (arg: TProgress): void }
+    progressCallbacks?: { (arg: TProgress): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredVRN<UValue, TReject, TProgress> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVRN<UValue, TReject, TProgress>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseVRN<UValue, TReject, TProgress> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVRN<UValue, TReject, TProgress>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (arg: TProgress): void }
+    progressCallbacks?: { (arg: TProgress): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (arg: TProgress): void }
+    progressCallbacks?: { (arg: TProgress): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (arg: TProgress): void }
+    progressCallbacks?: { (arg: TProgress): void },
  ): JQueryPromise;
 }

@@ -581,32 +581,32 @@ interface JQueryPromiseR<TReject> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then(
    doneCallbacks: { (): JQueryDeferredR<TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<TReject>;

  then(
    doneCallbacks: { (): JQueryPromiseR<TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<TReject>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks?: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -629,7 +629,7 @@ interface JQueryDeferredAny {
  then(
    doneCallbacks: { (...args: any[]): any },
    failCallbacks: { (...args: any[]): any },
-    progressCallbacks?: { (...args: any[]): any }
+    progressCallbacks?: { (...args: any[]): any },
  ): JQueryDeferredAny;
 }

@@ -650,33 +650,33 @@ interface JQueryDeferred {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then(
    doneCallbacks: { (): JQueryDeferred },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;

  then(
    doneCallbacks: { (): JQueryPromise },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;

  // U Value
  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(doneCallbacks: { (): void }, failCallbacks?: { (): void }, progressCallbacks?: { (): void }): JQueryPromise;
@@ -699,39 +699,39 @@ interface JQueryDeferredV<TValue> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredV<UValue> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseV<UValue> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -752,39 +752,39 @@ interface JQueryDeferredN<TNotify> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then(
    doneCallbacks: { (): JQueryDeferredN<TNotify> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseN<TNotify>;

  then(
    doneCallbacks: { (): JQueryPromiseN<TNotify> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseN<TNotify>;

  // U Value
  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromise;
 }

@@ -793,14 +793,14 @@ interface JQueryDeferredNNNN<TNotify1, TNotify2, TNotify3, TNotify4> {
    arg1: TNotify1,
    arg2: TNotify2,
    arg3: TNotify3,
-    arg4: TNotify4
+    arg4: TNotify4,
  ): JQueryDeferredNNNN<TNotify1, TNotify2, TNotify3, TNotify4>;
  notifyWith(
    context: any,
    arg1: TNotify1,
    arg2: TNotify2,
    arg3: TNotify3,
-    arg4: TNotify4
+    arg4: TNotify4,
  ): JQueryDeferredNNNN<TNotify1, TNotify2, TNotify3, TNotify4>;

  always(...alwaysCallbacks: Array<{ (): void }>): JQueryDeferredNNNN<TNotify1, TNotify2, TNotify3, TNotify4>;
@@ -818,25 +818,25 @@ interface JQueryDeferredNNNN<TNotify1, TNotify2, TNotify3, TNotify4> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseVR<UValue, UReject>;

  then<UValue>(
    doneCallbacks: { (): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void }
+    progressCallbacks?: { (arg1: TNotify1, arg2: TNotify2, arg3: TNotify3, arg4: TNotify4): void },
  ): JQueryPromise;
 }

@@ -857,39 +857,39 @@ interface JQueryDeferredVV<TValue1, TValue2> {
  then<UValue, UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): UValue },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue1, UValue2>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): JQueryDeferredVV<UValue1, UValue2> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVV<UValue1, UValue2>;

  then<UValue1, UValue2>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): JQueryPromiseVV<UValue1, UValue2> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVV<UValue1, UValue2>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): void },
    failCallbacks: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -912,39 +912,39 @@ interface JQueryDeferredVVV<TValue1, TValue2, TValue3> {
  then<UValue, UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): UValue },
    failCallbacks?: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue1, UValue2, UValue3>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): JQueryDeferredVVV<UValue1, UValue2, UValue3> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVVV<UValue1, UValue2, UValue3>;

  then<UValue1, UValue2, UValue3>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): JQueryPromiseVVV<UValue1, UValue2, UValue3> },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVVV<UValue1, UValue2, UValue3>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): UValue },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): void },
    failCallbacks?: { (): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg1: TValue1, arg2: TValue2, arg3: TValue3): void },
    failCallbacks?: { (): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -965,39 +965,39 @@ interface JQueryDeferredVR<TValue, TReject> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredVR<UValue, TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, TReject>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseVR<UValue, TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, TReject>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -1018,39 +1018,39 @@ interface JQueryDeferredVRN<TValue, TReject, TNotify> {
  then<UValue, UReject>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryDeferredVRN<UValue, TReject, TNotify> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVRN<UValue, TReject, TNotify>;

  then<UValue>(
    doneCallbacks: { (arg: TValue): JQueryPromiseVRN<UValue, TReject, TNotify> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVRN<UValue, TReject, TNotify>;

  // U Value
  then<UValue>(
    doneCallbacks: { (arg: TValue): UValue },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseV<UValue>;

  then<UReject>(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (arg: TValue): void },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (arg: TNotify): void }
+    progressCallbacks?: { (arg: TNotify): void },
  ): JQueryPromise;
 }

@@ -1071,32 +1071,32 @@ interface JQueryDeferredR<TReject> {
  then<UValue, UReject>(
    doneCallbacks: { (): UValue },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseVR<UValue, UReject>;

  // U Pipe
  then(
    doneCallbacks: { (): JQueryDeferredR<TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<TReject>;

  then(
    doneCallbacks: { (): JQueryPromiseR<TReject> },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<TReject>;

  then<UReject>(
    doneCallbacks: { (): void },
    failCallbacks: { (arg: TReject): UReject },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromiseR<UReject>;

  then(
    doneCallbacks: { (): void },
    failCallbacks?: { (arg: TReject): void },
-    progressCallbacks?: { (): void }
+    progressCallbacks?: { (): void },
  ): JQueryPromise;
 }

@@ -1210,7 +1210,7 @@ interface JQueryWhen {
  <T1, T2, T3>(
    promise1: JQueryPromiseV<T1>,
    promise2: JQueryPromiseV<T2>,
-    promise3: JQueryPromiseV<T3>
+    promise3: JQueryPromiseV<T3>,
  ): JQueryPromiseVVV<T1, T2, T3>;
  (...deferreds: JQueryPromise[]): JQueryPromise;
  apply($: JQueryStatic, deferreds: JQueryPromise[]): JQueryPromise;
@@ -1238,8 +1238,8 @@ interface JQueryStatic {
    handler: (
      options: JQueryAjaxSettings<T>,
      originalOptions: JQueryAjaxSettings<T>,
-      jqXHR: JQueryXHR<T>
-    ) => JQueryTransport
+      jqXHR: JQueryXHR<T>,
+    ) => JQueryTransport,
  ): any;

  get<T>(url: string, data?: any, success?: any, dataType?: any): JQueryXHR<T>;
@@ -1410,8 +1410,8 @@ interface JQueryTransport {
      status: number,
      statusText: string,
      responses?: { [dataType: string]: any },
-      headers?: string
-    ) => any
+      headers?: string,
+    ) => any,
  ): any;
  abort(): any;
 }
@@ -1547,7 +1547,7 @@ interface JQuery {
      step?: Function;
      queue?: boolean;
      specialEasing?: any;
-    }
+    },
  ): JQuery;

  delay(duration: number, queueName?: string): JQuery;
@@ -1621,7 +1621,7 @@ interface JQuery {

  hover(
    handlerIn: (eventObject: JQueryEventObject) => any,
-    handlerOut: (eventObject: JQueryEventObject) => any
+    handlerOut: (eventObject: JQueryEventObject) => any,
  ): JQuery;
  hover(handlerInOut: (eventObject: JQueryEventObject) => any): JQuery;

--- a/src/Explorer/ContextMenuButtonFactory.tsx
+++ b/src/Explorer/ContextMenuButtonFactory.tsx
@@ -18,6 +18,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 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";
@@ -56,7 +57,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
          .getState()
          .openSidePanel(
            "Delete " + getDatabaseName(),
-            <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />
+            <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />,
          ),
      label: `Delete ${getDatabaseName()}`,
      styleClass: "deleteDatabaseMenuItem",
@@ -67,7 +68,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin

 export const createCollectionContextMenuButton = (
  container: Explorer,
-  selectedCollection: ViewModels.Collection
+  selectedCollection: ViewModels.Collection,
 ): TreeNodeMenuItem[] => {
  const items: TreeNodeMenuItem[] = [];
  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
@@ -99,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",
@@ -112,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",
@@ -121,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",
@@ -130,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()} />
-        ),
+          <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+        );
+    },
    label: `Delete ${getCollectionName()}`,
    styleClass: "deleteCollectionMenuItem",
  });
@@ -172,7 +175,7 @@ export const createSampleCollectionContextMenuButton = (): TreeNodeMenuItem[] =>

 export const createStoreProcedureContextMenuItems = (
  container: Explorer,
-  storedProcedure: StoredProcedure
+  storedProcedure: StoredProcedure,
 ): TreeNodeMenuItem[] => {
  if (userContext.apiType === "Cassandra") {
    return [];
@@ -203,7 +206,7 @@ export const createTriggerContextMenuItems = (container: Explorer, trigger: Trig

 export const createUserDefinedFunctionContextMenuItems = (
  container: Explorer,
-  userDefinedFunction: UserDefinedFunction
+  userDefinedFunction: UserDefinedFunction,
 ): TreeNodeMenuItem[] => {
  if (userContext.apiType === "Cassandra") {
    return [];
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -203,11 +203,9 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
          }}
        >
          <div className="commandDropdown">
-            {this.props.children.map(
-              (c: CommandButtonComponentProps, index: number): JSX.Element => {
-                return CommandButtonComponent.renderButton(c, `${index}`);
-              }
-            )}
+            {this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
+              return CommandButtonComponent.renderButton(c, `${index}`);
+            })}
          </div>
        </div>
      </div>
@@ -217,7 +215,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
  public static renderLabel(
    props: CommandButtonComponentProps,
    key?: string,
-    refct?: (input: HTMLElement) => void
+    refct?: (input: HTMLElement) => void,
  ): JSX.Element {
    if (!props.commandButtonLabel) {
      return <React.Fragment />;
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -1,9 +1,9 @@
 import {
  ChoiceGroup,
  DefaultButton,
-  Dialog as FluentDialog,
  DialogFooter,
  DialogType,
+  Dialog as FluentDialog,
  FontIcon,
  IButtonProps,
  IChoiceGroupProps,
@@ -15,7 +15,7 @@ import {
  ProgressIndicator,
  TextField,
 } from "@fluentui/react";
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import create, { UseStore } from "zustand";

 export interface DialogState {
@@ -33,7 +33,7 @@ export interface DialogState {
    contentHtml?: JSX.Element,
    choiceGroupProps?: IChoiceGroupProps,
    textFieldProps?: TextFieldProps,
-    primaryButtonDisabled?: boolean
+    primaryButtonDisabled?: boolean,
  ) => void;
  showOkModalDialog: (title: string, subText: string) => void;
 }
@@ -50,7 +50,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
        showOkCancelModalDialog: state.showOkCancelModalDialog,
        showOkModalDialog: state.showOkModalDialog,
      }),
-      true // TODO: This probably should not be true but its causing a prod bug so easier to just set the proper state above
+      true, // TODO: This probably should not be true but its causing a prod bug so easier to just set the proper state above
    ),
  showOkCancelModalDialog: (
    title: string,
@@ -62,7 +62,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
    contentHtml?: JSX.Element,
    choiceGroupProps?: IChoiceGroupProps,
    textFieldProps?: TextFieldProps,
-    primaryButtonDisabled?: boolean
+    primaryButtonDisabled?: boolean,
  ): void =>
    get().openDialog({
      isModal: true,
@@ -157,6 +157,20 @@ export const Dialog: FC = () => {
    contentHtml,
  } = props || {};

+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      useDialog.getState().closeDialog();
+    }
+  };
+
+  useEffect(() => {
+    if (visible) {
+      document.addEventListener("keydown", handleKeyDown);
+    } else {
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [visible]);
+
  const dialogProps: IDialogProps = {
    hidden: !visible,
    dialogContentProps: {
--- a/src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
+++ b/src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
@@ -95,7 +95,7 @@ export class DiffEditorViewModel {
  protected async createDiffEditor(
    originalContent: string,
    modifiedContent: string,
-    createCallback: (e: monaco.editor.IStandaloneDiffEditor) => void
+    createCallback: (e: monaco.editor.IStandaloneDiffEditor) => void,
  ) {
    this.editorContainer = document.getElementById(this.getEditorId());
    this.editorContainer.innerHTML = "";
@@ -116,7 +116,7 @@ export class DiffEditorViewModel {
    const modifiedModel = monaco.editor.createModel(modifiedContent, language);
    const diffEditor: monaco.editor.IStandaloneDiffEditor = monaco.editor.createDiffEditor(
      this.editorContainer,
-      options
+      options,
    );
    diffEditor.setModel({
      original: originalModel,
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/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> {
@@ -54,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>
    );
  }
@@ -74,7 +84,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
        (event: monaco.editor.ICursorSelectionChangedEvent) => {
          const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
          this.props.onContentSelected(selectedContent);
-        }
+        },
      );
    }
  }
@@ -84,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 = "";
--- a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
+++ b/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
@@ -32,12 +32,12 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {

  // React hooks to keep state
  const [baseUrl, setBaseUrl] = React.useState<IDropdownOption>(
-    baseUrlOptions.find((o) => o.key === window.location.origin + window.location.pathname) || baseUrlOptions[0]
+    baseUrlOptions.find((o) => o.key === window.location.origin + window.location.pathname) || baseUrlOptions[0],
  );
  const [platform, setPlatform] = React.useState<IDropdownOption>(
    urlParams.has("platform")
      ? platformOptions.find((o) => o.key === urlParams.get("platform")) || platformOptions[0]
-      : platformOptions[0]
+      : platformOptions[0],
  );

  const booleanFeatures: {
@@ -93,10 +93,10 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
  ];

  booleanFeatures.forEach(
-    (f) => (f.reactState = React.useState<boolean>(urlParams.has(f.key) ? urlParams.get(f.key) === "true" : false))
+    (f) => (f.reactState = React.useState<boolean>(urlParams.has(f.key) ? urlParams.get(f.key) === "true" : false)),
  );
  stringFeatures.forEach(
-    (f) => (f.reactState = React.useState<string>(urlParams.has(f.key) ? urlParams.get(f.key) : undefined))
+    (f) => (f.reactState = React.useState<string>(urlParams.has(f.key) ? urlParams.get(f.key) : undefined)),
  );

  const buildUrl = (): string => {
@@ -121,14 +121,14 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
    (f) =>
      (f.onChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void => {
        f.reactState[1](checked);
-      })
+      }),
  );

  stringFeatures.forEach(
    (f) =>
      (f.onChange = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
        f.reactState[1](newValue);
-      })
+      }),
  );

  const onNotebookShortcut = (): void => {
--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -63,7 +63,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add

  private onTextFieldChange = (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
  ): void => {
    this.setState({
      textFieldValue: newValue || "",
@@ -100,7 +100,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
          {
            dataExplorerArea: Constants.Areas.Notebook,
          },
-          startKey
+          startKey,
        );
        return this.props.pinRepo(item);
      }
@@ -115,7 +115,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
        dataExplorerArea: Constants.Areas.Notebook,
        error: AddRepoComponent.TextFieldErrorMessage,
      },
-      startKey
+      startKey,
    );
  };
 }
--- a/src/Explorer/Controls/GitHub/ReposListComponent.tsx
+++ b/src/Explorer/Controls/GitHub/ReposListComponent.tsx
@@ -211,7 +211,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
  };

  private onRenderBranchesDropdownList = (
-    props: ISelectableDroppableTextProps<IDropdown, HTMLDivElement>
+    props: ISelectableDroppableTextProps<IDropdown, HTMLDivElement>,
  ): JSX.Element => {
    const renderedList: JSX.Element[] = [];
    props.options.forEach((option: IDropdownOption) => {
--- a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
+++ b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
@@ -42,7 +42,7 @@ export class GalleryHeaderComponent extends React.Component {
          {this.renderHeaderItem(
            GalleryHeaderComponent.azureText,
            GalleryHeaderComponent.openPortal,
-            GalleryHeaderComponent.mainHeaderTextProps
+            GalleryHeaderComponent.mainHeaderTextProps,
          )}
        </Stack.Item>
        <Stack.Item>
@@ -52,7 +52,7 @@ export class GalleryHeaderComponent extends React.Component {
          {this.renderHeaderItem(
            GalleryHeaderComponent.cosmosdbText,
            GalleryHeaderComponent.openDataExplorer,
-            GalleryHeaderComponent.headerItemTextProps
+            GalleryHeaderComponent.headerItemTextProps,
          )}
        </Stack.Item>
        <Stack.Item>
@@ -62,7 +62,7 @@ export class GalleryHeaderComponent extends React.Component {
          {this.renderHeaderItem(
            GalleryHeaderComponent.galleryText,
            () => "",
-            GalleryHeaderComponent.headerItemTextProps
+            GalleryHeaderComponent.headerItemTextProps,
          )}
        </Stack.Item>
        <Stack.Item grow>
@@ -72,7 +72,7 @@ export class GalleryHeaderComponent extends React.Component {
          {this.renderHeaderItem(
            GalleryHeaderComponent.loginText,
            GalleryHeaderComponent.openDataExplorer,
-            GalleryHeaderComponent.headerItemTextProps
+            GalleryHeaderComponent.headerItemTextProps,
          )}
        </Stack.Item>
      </Stack>
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -133,7 +133,7 @@ export class InputTypeaheadComponent extends React.Component<
  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
    return choices.filter((choice) =>
      // @ts-ignore
-      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
+      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase())),
    );
  };

--- a/src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
+++ b/src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
@@ -133,7 +133,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
        (event: monaco.editor.ICursorSelectionChangedEvent) => {
          const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
          this.params.selectedContent(selectedContent);
-        }
+        },
      );
    }

--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+++ b/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();
+  });
 });
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@@ -14,6 +14,7 @@ export interface NotebookTerminalComponentProps {
  notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
  databaseAccount: DataModels.DatabaseAccount;
  tabId: string;
+  username?: string;
 }

 export class NotebookTerminalComponent extends React.Component<NotebookTerminalComponentProps> {
@@ -50,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,
@@ -61,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,
    });
@@ -78,6 +86,8 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
      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) {
--- a/src/Explorer/Controls/Notebook/snapshots/NotebookTerminalComponent.test.tsx.snap
+++ b/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>
+`;
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -90,7 +90,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
    iconName: string,
    title: string,
    horizontalAlign: "right" | "left",
-    activate: () => void
+    activate: () => void,
  ): JSX.Element => {
    return (
      <TooltipHost
@@ -116,7 +116,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
          HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
          MouseEvent
        >,
-    activate: () => void
+    activate: () => void,
  ): void => {
    event.stopPropagation();
    event.preventDefault();
@@ -183,7 +183,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
                    isFavorite ? "HeartFill" : "Heart",
                    isFavorite ? "Unfavorite" : "Favorite",
                    "left",
-                    isFavorite ? onUnfavoriteClick : onFavoriteClick
+                    isFavorite ? onUnfavoriteClick : onFavoriteClick,
                  )}

                {showDownload && generateIconButtonWithTooltip("Download", "Download", "left", onDownloadClick)}
@@ -192,8 +192,8 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
                  generateIconButtonWithTooltip("Delete", "Remove", "right", () =>
                    onDeleteClick(
                      () => setIsDeletingPublishedNotebook(true),
-                      () => setIsDeletingPublishedNotebook(false)
-                    )
+                      () => setIsDeletingPublishedNotebook(false),
+                    ),
                  )}
              </span>
            </DocumentCardDetails>
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx
@@ -44,7 +44,7 @@ export const CodeOfConduct: FunctionComponent<CodeOfConductProps> = ({
          error: getErrorMessage(error),
          errorStack: getErrorStack(error),
        },
-        startKey
+        startKey,
      );

      handleError(error, "CodeOfConduct/acceptCodeOfConduct", "Failed to accept code of conduct");
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -155,8 +155,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
        this.createPublicGalleryTab(
          GalleryTab.PublicGallery,
          this.state.publicNotebooks,
-          this.state.isCodeOfConductAccepted
-        )
+          this.state.isCodeOfConductAccepted,
+        ),
      );
    }
    tabs.push(this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks));
@@ -265,7 +265,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  private createPublicGalleryTab(
    tab: GalleryTab,
    data: IGalleryItem[],
-    acceptedCodeOfConduct: boolean
+    acceptedCodeOfConduct: boolean,
  ): GalleryTabInfo {
    return {
      tab,
@@ -285,7 +285,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
          Favorite any notebook from the{" "}
          <Link onClick={() => this.setState({ selectedTab: GalleryTab.OfficialSamples })}>official samples</Link> or{" "}
          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link>
-        </>
+        </>,
      );
    }
    return this.createSearchBarHeader(this.createCardsTabContent(data));
@@ -309,7 +309,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
          You have not published anything to the{" "}
          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link> yet
        </>,
-        <>Publish your notebooks to share your work with other users</>
+        <>Publish your notebooks to share your work with other users</>,
      );
    }
    return this.createPublishedNotebooksTabContent(data);
@@ -330,19 +330,19 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
          this.createPublishedNotebooksSectionContent(
            undefined,
            "You have successfully published and shared the following notebook(s) to the public gallery.",
-            this.createCardsTabContent(published)
+            this.createCardsTabContent(published),
          )}
        {underReview?.length > 0 &&
          this.createPublishedNotebooksSectionContent(
            "Under Review",
            "Content of a notebook you published is currently being scanned for illegal content. It will not be available to public gallery until the review is completed (may take a few days)",
-            this.createCardsTabContent(underReview)
+            this.createCardsTabContent(underReview),
          )}
        {removed?.length > 0 &&
          this.createPublishedNotebooksSectionContent(
            "Removed",
            "These notebooks were found to contain illegal content and has been taken down.",
-            this.createPolicyViolationsListContent(removed)
+            this.createPolicyViolationsListContent(removed),
          )}
      </Stack>
    );
@@ -353,7 +353,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  private createPublishedNotebooksSectionContent = (
    title: string,
    description: string,
-    content: JSX.Element
+    content: JSX.Element,
  ): JSX.Element => {
    return (
      <Stack tokens={{ childrenGap: 10 }}>
@@ -708,7 +708,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone

  private downloadItem = async (data: IGalleryItem): Promise<void> => {
    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, data, (item) =>
-      this.refreshSelectedTab(item)
+      this.refreshSelectedTab(item),
    );
  };

@@ -722,7 +722,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
        this.refreshSelectedTab(item);
      },
      beforeDelete,
-      afterDelete
+      afterDelete,
    );
  };

--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -44,7 +44,8 @@ interface NotebookViewerComponentState {

 export class NotebookViewerComponent
  extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
-  implements DialogHost {
+  implements DialogHost
+{
  private clientManager: NotebookClientV2;
  private notebookComponentBootstrapper: NotebookComponentBootstrapper;

@@ -97,7 +98,7 @@ export class NotebookViewerComponent
          notebookId: this.props.galleryItem?.id,
          isSample: this.props.galleryItem?.isSample,
        },
-        startKey
+        startKey,
      );

      const notebook: Notebook = await response.json();
@@ -123,7 +124,7 @@ export class NotebookViewerComponent
          error: getErrorMessage(error),
          errorStack: getErrorStack(error),
        },
-        startKey
+        startKey,
      );

      this.setState({ showProgressBar: false });
@@ -172,7 +173,7 @@ export class NotebookViewerComponent

  public static getDerivedStateFromProps(
    props: NotebookViewerComponentProps,
-    state: NotebookViewerComponentState
+    state: NotebookViewerComponentState,
  ): Partial<NotebookViewerComponentState> {
    let galleryItem = props.galleryItem;
    let isFavorite = props.isFavorite;
@@ -196,7 +197,7 @@ export class NotebookViewerComponent
    msg: string,
    okLabel: string,
    onOk: () => void,
-    progressIndicatorProps?: IProgressIndicatorProps
+    progressIndicatorProps?: IProgressIndicatorProps,
  ): void {
    useDialog.getState().openDialog({
      isModal: true,
@@ -223,7 +224,7 @@ export class NotebookViewerComponent
    progressIndicatorProps?: IProgressIndicatorProps,
    choiceGroupProps?: IChoiceGroupProps,
    textFieldProps?: TextFieldProps,
-    primaryButtonDisabled?: boolean
+    primaryButtonDisabled?: boolean,
  ): void {
    useDialog.getState().openDialog({
      isModal: true,
@@ -248,19 +249,19 @@ export class NotebookViewerComponent

  private favoriteItem = async (): Promise<void> => {
    GalleryUtils.favoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, (item) =>
-      this.setState({ galleryItem: item, isFavorite: true })
+      this.setState({ galleryItem: item, isFavorite: true }),
    );
  };

  private unfavoriteItem = async (): Promise<void> => {
    GalleryUtils.unfavoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, (item) =>
-      this.setState({ galleryItem: item, isFavorite: false })
+      this.setState({ galleryItem: item, isFavorite: false }),
    );
  };

  private downloadItem = async (): Promise<void> => {
    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, this.state.galleryItem, (item) =>
-      this.setState({ galleryItem: item })
+      this.setState({ galleryItem: item }),
    );
  };

--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/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";
@@ -66,7 +66,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
  public componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
    this.selection.setItems(
      this.state.filteredResults,
-      !_.isEqual(prevState.filteredResults, this.state.filteredResults)
+      !_.isEqual(prevState.filteredResults, this.state.filteredResults),
    );
    this.queryFilter && this.queryFilter.focus();
    const querySetupCompleted: boolean = !prevProps.saveQueryEnabled && this.props.saveQueryEnabled;
@@ -159,7 +159,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
    if (query) {
      const filteredQueries: Query[] = this.state.queries.filter(
        (savedQuery: Query) =>
-          savedQuery.queryName.indexOf(query) > -1 || savedQuery.queryName.toLowerCase().indexOf(query) > -1
+          savedQuery.queryName.indexOf(query) > -1 || savedQuery.queryName.toLowerCase().indexOf(query) > -1,
      );
      this.setState({
        filteredResults: filteredQueries,
@@ -240,7 +240,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                              dataExplorerArea: Constants.Areas.ContextualPane,
                              paneTitle: title,
                            },
-                            startKey
+                            startKey,
                          );
                        } catch (error) {
                          TelemetryProcessor.traceFailure(
@@ -251,13 +251,13 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                              error: getErrorMessage(error),
                              errorStack: getErrorStack(error),
                            },
-                            startKey
+                            startKey,
                          );
                        }
                        await this.fetchSavedQueries(); // get latest state
                      },
                      "Cancel",
-                      undefined
+                      undefined,
                    );
                  },
                },
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/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,
@@ -247,7 +251,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    if (userContext.apiType === "Mongo" && userContext?.databaseAccount) {
      this.mongoDBCollectionResource = await readMongoDBCollectionThroughRP(
        this.collection.databaseId,
-        this.collection.id()
+        this.collection.id(),
      );

      if (this.mongoDBCollectionResource) {
@@ -353,7 +357,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
          error: getErrorMessage(error),
          errorStack: getErrorStack(error),
        },
-        startKey
+        startKey,
      );
    } finally {
      this.props.settingsTab.isExecuting(false);
@@ -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: [],
@@ -426,7 +431,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
          dataExplorerArea: Constants.Areas.Tab,
          tabTitle: this.props.settingsTab.tabTitle(),
        },
-        this.props.settingsTab.onLoadStartKey
+        this.props.settingsTab.onLoadStartKey,
      );
      this.props.settingsTab.onLoadStartKey = undefined;
    }
@@ -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 });

@@ -558,7 +566,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        this.collection.databaseId,
        this.collection.id(),
        this.state.conflictResolutionPolicyProcedure,
-        false
+        false,
      );
    }

@@ -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) {
@@ -630,7 +640,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    const conflictResolutionPolicyMode = parseConflictResolutionMode(conflictResolutionPolicy?.mode);
    const conflictResolutionPolicyPath = conflictResolutionPolicy?.conflictResolutionPath;
    const conflictResolutionPolicyProcedure = parseConflictResolutionProcedure(
-      conflictResolutionPolicy?.conflictResolutionProcedure
+      conflictResolutionPolicy?.conflictResolutionProcedure,
    );
    const geospatialConfigTypeString: string =
      (this.collection.geospatialConfig && this.collection.geospatialConfig()?.type) || GeospatialConfigType.Geometry;
@@ -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,
@@ -768,7 +780,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        dataExplorerArea: Constants.Areas.Tab,
        tabTitle: this.props.settingsTab.tabTitle(),
      },
-      startKey
+      startKey,
    );
  };

@@ -816,7 +828,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      const updatedCollection: DataModels.Collection = await updateCollection(
        this.collection.databaseId,
        this.collection.id(),
-        newCollection
+        newCollection,
      );
      this.collection.rawDataModel = updatedCollection;
      this.collection.defaultTtl(updatedCollection.defaultTtl);
@@ -850,7 +862,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        this.mongoDBCollectionResource = await updateCollection(
          this.collection.databaseId,
          this.collection.id(),
-          newMongoCollection
+          newMongoCollection,
        );

        await this.refreshIndexTransformationProgress();
@@ -869,7 +881,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
            dataExplorerArea: Constants.Areas.Tab,
            tabTitle: this.props.settingsTab.tabTitle(),
          },
-          startKey
+          startKey,
        );
      } catch (error) {
        traceFailure(
@@ -883,7 +895,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
            error: getErrorMessage(error),
            errorStack: getErrorStack(error),
          },
-          startKey
+          startKey,
        );
        throw error;
      }
@@ -930,12 +942,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        dataExplorerArea: Constants.Areas.Tab,
        tabTitle: this.props.settingsTab.tabTitle(),
      },
-      startKey
+      startKey,
    );
  };

  public getMongoIndexTabContent = (
-    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
+    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps,
  ): JSX.Element => {
    if (userContext.authType === AuthType.AAD) {
      if (userContext.apiType === "Mongo") {
@@ -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,
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -23,7 +23,8 @@ import {
  Text,
 } from "@fluentui/react";
 import * as React from "react";
-import { StyleConstants, Urls } from "../../../Common/Constants";
+import { Urls } from "../../../Common/Constants";
+import { StyleConstants } from "../../../Common/StyleConstants";
 import { hoursInAMonth } from "../../../Shared/Constants";
 import {
  computeRUUsagePriceHourly,
@@ -178,7 +179,7 @@ export const getRuPriceBreakdown = (
  serverId: string,
  numberOfRegions: number,
  isMultimaster: boolean,
-  isAutoscale: boolean
+  isAutoscale: boolean,
 ): PriceBreakdown => {
  const hourlyPrice: number = computeRUUsagePriceHourly({
    serverId: serverId,
@@ -206,7 +207,7 @@ export const getEstimatedSpendingElement = (
  throughput: number,
  numberOfRegions: number,
  priceBreakdown: PriceBreakdown,
-  isAutoscale: boolean
+  isAutoscale: boolean,
 ): JSX.Element => {
  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
  return (
@@ -278,7 +279,7 @@ export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThrou

 export const getUpdateThroughputBeyondSupportLimitMessage = (
  instantMaximumThroughput: number,
-  maximumThroughput: number
+  maximumThroughput: number,
 ): JSX.Element => {
  return (
    <>
@@ -332,15 +333,15 @@ const getCurrentThroughput = (
  isAutoscale: boolean,
  throughput: number,
  throughputUnit: string,
-  targetThroughput?: number
+  targetThroughput?: number,
 ): string => {
  if (targetThroughput) {
    if (throughput) {
      return isAutoscale
        ? `, Current autoscale throughput: ${Math.round(
-            throughput / 10
+            throughput / 10,
          )} - ${throughput} ${throughputUnit}, Target autoscale throughput: ${Math.round(
-            targetThroughput / 10
+            targetThroughput / 10,
          )} - ${targetThroughput} ${throughputUnit}`
        : `, Current manual throughput: ${throughput} ${throughputUnit}, Target manual throughput: ${targetThroughput}`;
    } else {
@@ -365,7 +366,7 @@ export const getThroughputApplyDelayedMessage = (
  throughputUnit: string,
  databaseName: string,
  collectionName: string,
-  requestedThroughput: number
+  requestedThroughput: number,
 ): JSX.Element => (
  <Text styles={infoAndToolTipTextStyle}>
    The request to increase the throughput has successfully been submitted. This operation will take 1-3 business days
@@ -381,7 +382,7 @@ export const getThroughputApplyShortDelayMessage = (
  throughput: number,
  throughputUnit: string,
  databaseName: string,
-  collectionName: string
+  collectionName: string,
 ): JSX.Element => (
  <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
    A request to increase the throughput is currently in progress. This operation will take some time to complete.
@@ -397,7 +398,7 @@ export const getThroughputApplyLongDelayMessage = (
  throughputUnit: string,
  databaseName: string,
  collectionName: string,
-  requestedThroughput: number
+  requestedThroughput: number,
 ): JSX.Element => (
  <Text styles={infoAndToolTipTextStyle} id="throughputApplyLongDelayMessage">
    A request to increase the throughput is currently in progress. This operation will take 1-3 business days to
@@ -479,7 +480,7 @@ export const mongoIndexTransformationRefreshingMessage: JSX.Element = (

 export const renderMongoIndexTransformationRefreshMessage = (
  progress: number,
-  performRefresh: () => void
+  performRefresh: () => void,
 ): JSX.Element => {
  if (progress === 0) {
    return (
@@ -515,7 +516,7 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
 export const getChoiceGroupStyles = (
  current: isDirtyTypes,
  baseline: isDirtyTypes,
-  isHorizontal?: boolean
+  isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
  flexContainer: [
    {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
@@ -68,20 +68,20 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut

  private onConflictResolutionPolicyModeChange = (
    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
+    option?: IChoiceGroupOption,
  ): void =>
    this.props.onConflictResolutionPolicyModeChange(
-      DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode]
+      DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode],
    );

  private onConflictResolutionPolicyPathChange = (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
  ): void => this.props.onConflictResolutionPolicyPathChange(newValue);

  private onConflictResolutionPolicyProcedureChange = (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
  ): void => this.props.onConflictResolutionPolicyProcedureChange(newValue);

  private getConflictResolutionModeComponent = (): JSX.Element => (
@@ -92,7 +92,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
      onChange={this.onConflictResolutionPolicyModeChange}
      styles={getChoiceGroupStyles(
        this.props.conflictResolutionPolicyMode,
-        this.props.conflictResolutionPolicyModeBaseline
+        this.props.conflictResolutionPolicyModeBaseline,
      )}
    />
  );
@@ -108,7 +108,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
      onRenderLabel={this.onRenderLwwComponentTextField}
      styles={getTextFieldStyles(
        this.props.conflictResolutionPolicyPath,
-        this.props.conflictResolutionPolicyPathBaseline
+        this.props.conflictResolutionPolicyPathBaseline,
      )}
      value={this.props.conflictResolutionPolicyPath}
      onChange={this.onConflictResolutionPolicyPathChange}
@@ -126,7 +126,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
      onRenderLabel={this.onRenderCustomComponentTextField}
      styles={getTextFieldStyles(
        this.props.conflictResolutionPolicyProcedure,
-        this.props.conflictResolutionPolicyProcedureBaseline
+        this.props.conflictResolutionPolicyProcedureBaseline,
      )}
      value={this.props.conflictResolutionPolicyProcedure}
      onChange={this.onConflictResolutionPolicyProcedureChange}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
@@ -35,7 +35,7 @@ export class IndexingPolicyRefreshComponent extends React.Component<
    } else if (isIndexTransforming(this.props.indexTransformationProgress)) {
      return renderMongoIndexTransformationRefreshMessage(
        this.props.indexTransformationProgress,
-        this.onClickRefreshIndexingTransformationLink
+        this.onClickRefreshIndexingTransformationLink,
      );
    }
    return undefined;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
@@ -40,12 +40,12 @@ export class AddMongoIndexComponent extends React.Component<AddMongoIndexCompone
    (value: MongoIndexTypes) => ({
      text: getMongoIndexTypeText(value),
      key: value,
-    })
+    }),
  );

  private onDescriptionChange = (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
  ): void => {
    this.props.onIndexAddOrChange(newValue, this.props.type);
  };
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
@@ -90,7 +90,7 @@ describe("MongoIndexingPolicyComponent", () => {
        indexToDropIsPresent: boolean,
        isMongoIndexingPolicySaveable: boolean,
        isMongoIndexingPolicyDiscardable: boolean,
-        mongoWarningNotificationMessage: string
+        mongoWarningNotificationMessage: string,
      ) => {
        const addMongoIndexProps = {
          mongoIndex: { key: { keys: ["sampleKey"] } },
@@ -107,7 +107,7 @@ describe("MongoIndexingPolicyComponent", () => {

        expect(mongoIndexingPolicyComponent.isMongoIndexingPolicySaveable()).toEqual(isMongoIndexingPolicySaveable);
        expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(
-          isMongoIndexingPolicyDiscardable
+          isMongoIndexingPolicyDiscardable,
        );
        if (mongoWarningNotificationMessage) {
          const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
@@ -115,7 +115,7 @@ describe("MongoIndexingPolicyComponent", () => {
        } else {
          expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
        }
-      }
+      },
    );
  });
 });
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -130,7 +130,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

  public getMongoWarningNotificationMessage = (): JSX.Element => {
    const warningMessage = this.props.indexesToAdd.find(
-      (addMongoIndexProps) => addMongoIndexProps.notification?.type === MongoNotificationType.Warning
+      (addMongoIndexProps) => addMongoIndexProps.notification?.type === MongoNotificationType.Warning,
    )?.notification.message;

    if (warningMessage) {
@@ -163,7 +163,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
  private getMongoIndexDisplayProps = (
    mongoIndex: MongoIndex,
    arrayPosition: number,
-    isCurrentIndex: boolean
+    isCurrentIndex: boolean,
  ): MongoIndexDisplayProps => {
    const keys = mongoIndex?.key?.keys;
    const type = getMongoIndexType(keys);
@@ -261,7 +261,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

  private renderIndexesToBeDropped = (): JSX.Element => {
    const indexesToBeDropped = this.props.indexesToDrop.map((dropIndex, arrayPosition) =>
-      this.getMongoIndexDisplayProps(this.props.mongoIndexes[dropIndex], arrayPosition, false)
+      this.getMongoIndexDisplayProps(this.props.mongoIndexes[dropIndex], arrayPosition, false),
    );

    return (
--- a/Show More
+++ b/Show More