Merge remote-tracking branch 'origin/master' into copilot_publicpreview

* P1 bugs for copilot

* P1 bugs for copilot

* P1 bugs for copilot

* Update branding and AFEC

* Update branding and AFEC

* add timeout for ARM calls

* increase test timeout

* fix formatting

* fix formatting

* fix formatting

* fix formatting

* don't call ARM when connectionstring login

images/CopilotCommand.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3626 11.9771C13.1573 11.9837 13.019 12.0288 12.9215 12.0836C12.817 12.1424 12.7301 12.229 12.6508 12.3542C12.4802 12.6239 12.3837 12.9957 12.252 13.5033L12.2347 13.5699C12.1079 14.0581 11.9424 14.6764 11.5775 15.1594C11.1788 15.687 10.5903 16 9.74835 16H4.63681C3.55423 16 2.75741 15.2435 2.18373 14.3271C1.60629 13.4047 1.17786 12.2045 0.845481 11.0542L0.845003 11.0525C0.464365 9.73512 -0.017355 8.06787 0.000479698 6.72244C0.00951195 6.04103 0.145994 5.34953 0.569528 4.825C1.00712 4.28305 1.66518 4.02294 2.50365 4.02294H2.63739C2.84267 4.01631 2.98102 3.97123 3.07848 3.9164C3.18305 3.85757 3.26995 3.77102 3.34916 3.64584C3.51985 3.37613 3.61631 3.00432 3.74801 2.49671L3.76529 2.43012C3.89213 1.94191 4.05757 1.32365 4.42251 0.840633C4.82119 0.312966 5.40972 0 6.25165 0H11.3632C12.4458 0 13.2426 0.756543 13.8163 1.67295C14.3937 2.59534 14.8221 3.79546 15.1545 4.94582L15.155 4.94748C15.5356 6.26488 16.0174 7.93213 15.9995 9.27756C15.9905 9.95897 15.854 10.6505 15.4305 11.175C14.9929 11.717 14.3348 11.9771 13.4963 11.9771H13.3626ZM14.1354 5.28381C13.8114 4.16251 13.4194 3.09096 12.9303 2.3096C12.4374 1.52225 11.9215 1.14296 11.3632 1.14296H7.95613C8.10274 1.42082 8.22537 1.731 8.33548 2.05199C8.48008 2.47355 8.61427 2.94842 8.75233 3.43699L8.78302 3.54557C9.32758 5.47082 10.008 7.94794 10.4498 9.5646C10.6507 10.2998 11.2693 10.8098 11.9798 10.8333H13.4156C13.4253 10.8333 13.4351 10.8335 13.4447 10.8341H13.4963C14.1298 10.8341 14.4484 10.6443 14.6237 10.4272C14.813 10.1928 14.9255 9.8162 14.9328 9.26133C14.9477 8.13479 14.5323 6.65749 14.1354 5.28381ZM3.06972 13.6904C3.56261 14.4777 4.0785 14.857 4.63681 14.857H8.04387C7.89726 14.5792 7.77463 14.269 7.66452 13.948C7.51992 13.5265 7.38573 13.0516 7.24767 12.563L7.21698 12.4544C6.67242 10.5292 5.99197 8.05206 5.55019 6.4354C5.34929 5.70024 4.73069 5.19015 4.02018 5.16674H2.58445C2.57465 5.16674 2.56492 5.16646 2.55526 5.1659H2.50365C1.87025 5.1659 1.5516 5.35572 1.37634 5.57277C1.18703 5.80723 1.07454 6.1838 1.06719 6.73867C1.05225 7.86521 1.46769 9.34251 1.86459 10.7162C2.18857 11.8375 2.58057 12.909 3.06972 13.6904ZM9.10298 10.8333H9.87304C9.67506 10.5554 9.5217 10.236 9.42598 9.88575C9.233 9.17956 8.99466 8.30985 8.74215 7.39421L8.47331 6.42622C8.26579 5.67902 7.62465 5.16674 6.89702 5.16674H6.12695C6.32494 5.44463 6.4783 5.76395 6.57402 6.11425C6.767 6.82044 7.00534 7.69015 7.25785 8.60579L7.52669 9.57378C7.73421 10.321 8.37535 10.8333 9.10298 10.8333ZM6.89702 4.02378C7.23212 4.02378 7.55609 4.08968 7.85646 4.21152C7.82459 4.0984 7.7931 3.98682 7.76205 3.87706L7.73417 3.77844C7.59304 3.27914 7.46754 2.83514 7.33414 2.44626C7.19129 2.02979 7.05211 1.71602 6.90214 1.4942C6.77014 1.29897 6.56087 1.14296 6.25165 1.14296C5.69009 1.14296 5.42306 1.33297 5.2517 1.55976C5.04661 1.83121 4.92755 2.21889 4.79304 2.73662C4.78284 2.77588 4.77249 2.81622 4.76191 2.85744C4.66966 3.21703 4.55997 3.64464 4.37733 4.02378H6.89702ZM9.10298 11.9762C8.76788 11.9762 8.44391 11.9103 8.14354 11.7885C8.1754 11.9016 8.2069 12.0132 8.23795 12.1229L8.26583 12.2216C8.40696 12.7208 8.53246 13.1649 8.66585 13.5537C8.80871 13.9702 8.94789 14.284 9.09786 14.5058C9.22986 14.701 9.43913 14.857 9.74835 14.857C10.3099 14.857 10.5769 14.667 10.7483 14.4402C10.9534 14.1688 11.0725 13.7811 11.207 13.2634C11.2172 13.2241 11.2275 13.1838 11.2381 13.1426C11.3303 12.783 11.44 12.3554 11.6227 11.9762H9.10298Z" fill="#0078D4"/>
+</svg>

images/QueryCopilotNewLogo.svg

@@ -1,34 +1,40 @@
-<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="34px" viewBox="0 0 34 34" version="1.1">
-<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint0_radial_857_143948)"/>
-<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint1_linear_857_143948)"/>
-<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint2_radial_857_143948)"/>
-<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint3_linear_857_143948)"/>
-<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint4_radial_857_143948)"/>
-<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint5_linear_857_143948)"/>
 <defs>
-<radialGradient id="paint0_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.5054 9.8837) rotate(112.544) scale(23.4519 19.3067)">
+<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(-7.787324,-9.624098,9.028449,-7.305356,26.915817,14.703725)">
-<stop offset="0.206732" stop-color="#4995D0"/>
+<stop offset="0.0955758" style="stop-color:rgb(0%,47.058824%,83.137255%);stop-opacity:1;"/>
-<stop offset="0.875628" stop-color="#0078D4"/>
+<stop offset="0.715277" style="stop-color:rgb(4.705882%,43.921569%,60.784314%);stop-opacity:1;"/>
+<stop offset="1" style="stop-color:rgb(3.921569%,31.372549%,47.45098%);stop-opacity:1;"/>
 </radialGradient>
-<linearGradient id="paint1_linear_857_143948" x1="11.0625" y1="26.6174" x2="9.78695" y2="24.2436" gradientUnits="userSpaceOnUse">
+<radialGradient id="radial1" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(7.955722,8.152531,-8.011265,7.817866,7.897393,23.013892)">
-<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="0" style="stop-color:rgb(0%,56.862745%,92.156863%);stop-opacity:1;"/>
-<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+<stop offset="0.523516" style="stop-color:rgb(15.294118%,39.215686%,90.588235%);stop-opacity:1;"/>
+<stop offset="0.923392" style="stop-color:rgb(2.352941%,21.176471%,76.470588%);stop-opacity:1;"/>
+</radialGradient>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="5.16831" y1="2" x2="7.75605" y2="17.2359" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
+<stop offset="0.289817" style="stop-color:rgb(0%,64.705882%,85.098039%);stop-opacity:1;"/>
+<stop offset="0.662336" style="stop-color:rgb(12.941176%,79.215686%,69.803922%);stop-opacity:1;"/>
+<stop offset="0.950002" style="stop-color:rgb(41.568627%,86.27451%,56.470588%);stop-opacity:1;"/>
 </linearGradient>
-<radialGradient id="paint2_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.899 24.5214) rotate(-3.9995) scale(24.6197 15.4594)">
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="7.25046" y1="2" x2="7.87502" y2="16.4401" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
-<stop offset="0.140029" stop-color="#80C8FF"/>
+<stop offset="0" style="stop-color:rgb(6.27451%,78.823529%,92.54902%);stop-opacity:1;"/>
-<stop offset="0.952721" stop-color="#0078D4"/>
+<stop offset="0.166667" style="stop-color:rgb(0.392157%,68.235294%,89.411765%);stop-opacity:0;"/>
-</radialGradient>
-<linearGradient id="paint3_linear_857_143948" x1="26.8932" y1="15.5508" x2="25.5491" y2="17.8921" gradientUnits="userSpaceOnUse">
-<stop offset="0.9999" stop-color="#3F8AC3"/>
-<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
 </linearGradient>
-<radialGradient id="paint4_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.632 16.3878) rotate(-138.33) scale(22.8015 13.0047)">
+<radialGradient id="radial2" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(-9.930588,25.254205,-30.30117,-11.915182,29.269325,8.70791)">
-<stop stop-color="#7BC6FF"/>
+<stop offset="0.154405" style="stop-color:rgb(15.294118%,44.313725%,84.705882%);stop-opacity:1;"/>
-<stop offset="0.839255" stop-color="#0078D4"/>
+<stop offset="0.678875" style="stop-color:rgb(7.843137%,69.411765%,100%);stop-opacity:1;"/>
+<stop offset="0.931138" style="stop-color:rgb(8.627451%,74.901961%,87.45098%);stop-opacity:1;"/>
 </radialGradient>
-<linearGradient id="paint5_linear_857_143948" x1="9.59961" y1="8.71337" x2="12.2131" y2="8.71337" gradientUnits="userSpaceOnUse">
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="21.2403" y1="7.01008" x2="20.306" y2="12.5802" gradientTransform="matrix(1.416667,0,0,1.416667,0,0)">
-<stop offset="0.9999" stop-color="#0078D4"/>
+<stop offset="0.0581535" style="stop-color:rgb(7.843137%,69.411765%,100%);stop-opacity:1;"/>
-<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+<stop offset="0.708063" style="stop-color:rgb(16.078431%,46.27451%,85.882353%);stop-opacity:0;"/>
 </linearGradient>
 </defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 24.1875 5.1875 C 23.777344 3.792969 22.496094 2.832031 21.039062 2.832031 L 20.078125 2.832031 C 18.496094 2.832031 17.140625 3.960938 16.855469 5.519531 L 15.175781 14.625 L 15.628906 13.066406 C 16.039062 11.664062 17.320312 10.703125 18.777344 10.703125 L 24.335938 10.703125 L 26.667969 11.613281 L 28.917969 10.703125 L 28.261719 10.703125 C 26.804688 10.703125 25.523438 9.746094 25.113281 8.347656 Z M 24.1875 5.1875 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial1);" d="M 10.152344 28.796875 C 10.558594 30.199219 11.839844 31.167969 13.300781 31.167969 L 15.359375 31.167969 C 17.128906 31.167969 18.578125 29.765625 18.636719 27.996094 L 18.941406 19.011719 L 18.371094 20.945312 C 17.960938 22.339844 16.679688 23.296875 15.226562 23.296875 L 9.613281 23.296875 L 7.613281 22.210938 L 5.449219 23.296875 L 6.09375 23.296875 C 7.554688 23.296875 8.839844 24.261719 9.246094 25.664062 Z M 10.152344 28.796875 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 20.898438 2.832031 L 9.535156 2.832031 C 6.289062 2.832031 4.339844 7.121094 3.042969 11.410156 C 1.503906 16.492188 -0.507812 23.289062 5.316406 23.289062 L 10.222656 23.289062 C 11.6875 23.289062 12.972656 22.320312 13.375 20.910156 C 14.230469 17.929688 15.722656 12.722656 16.898438 8.761719 C 17.496094 6.75 17.992188 5.019531 18.753906 3.941406 C 19.183594 3.339844 19.894531 2.832031 20.898438 2.832031 Z M 20.898438 2.832031 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 20.898438 2.832031 L 9.535156 2.832031 C 6.289062 2.832031 4.339844 7.121094 3.042969 11.410156 C 1.503906 16.492188 -0.507812 23.289062 5.316406 23.289062 L 10.222656 23.289062 C 11.6875 23.289062 12.972656 22.320312 13.375 20.910156 C 14.230469 17.929688 15.722656 12.722656 16.898438 8.761719 C 17.496094 6.75 17.992188 5.019531 18.753906 3.941406 C 19.183594 3.339844 19.894531 2.832031 20.898438 2.832031 Z M 20.898438 2.832031 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial2);" d="M 13.101562 31.167969 L 24.464844 31.167969 C 27.710938 31.167969 29.660156 26.878906 30.957031 22.589844 C 32.496094 17.507812 34.507812 10.710938 28.6875 10.710938 L 23.78125 10.710938 C 22.3125 10.710938 21.027344 11.679688 20.625 13.089844 C 19.769531 16.074219 18.277344 21.277344 17.101562 25.238281 C 16.503906 27.253906 16.007812 28.980469 15.246094 30.058594 C 14.816406 30.660156 14.105469 31.167969 13.101562 31.167969 Z M 13.101562 31.167969 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 13.101562 31.167969 L 24.464844 31.167969 C 27.710938 31.167969 29.660156 26.878906 30.957031 22.589844 C 32.496094 17.507812 34.507812 10.710938 28.6875 10.710938 L 23.78125 10.710938 C 22.3125 10.710938 21.027344 11.679688 20.625 13.089844 C 19.769531 16.074219 18.277344 21.277344 17.101562 25.238281 C 16.503906 27.253906 16.007812 28.980469 15.246094 30.058594 C 14.816406 30.660156 14.105469 31.167969 13.101562 31.167969 Z M 13.101562 31.167969 "/>
+</g>
 </svg>

images/X-errorMessage.svg

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

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;
+    outline: 1px dashed #605E5C;
-    border-style: solid;
+    outline-offset: -2px;
-    border-color: #007ACC;
     /*[{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;

less/documentDB.less

@@ -1179,16 +1179,16 @@ menuQuickStart {
   }
 }
 
-.gridRowSelected {
+#tbodycontent tr.gridRowSelected {
   .active();
 }
 
-.gridRowSelected:hover {
+#tbodycontent tr.gridRowSelected:hover {
   cursor: default;
   .hover();
 }
 
-.gridRowHighlighted {
+#tbodycontent tr.gridRowHighlighted {
   border-style: dotted;
   border-width: 2px;
 }
@@ -2576,9 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
   font-style: italic;
 }
-.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.querydropdown.placeholderVisible::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #767474;
-  opacity: 1; 
+  opacity: 1;
 }
 
 .querydropdown:hover {
@@ -2648,7 +2649,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid rgba(0,120,212,1);
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -3096,4 +3097,3 @@ a:link {
   background: white;
   height: 100%;
 }
-

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.16.2",
+    "@azure/cosmos": "4.0.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
     "@azure/ms-rest-nodeauth": "3.0.7",
@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.14.3",
-    "@fluentui/react-components": "9.30.1",
+    "@fluentui/react-components": "9.32.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -92,6 +92,7 @@
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "react-splitter-layout": "4.0.0",
+    "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
     "redux": "4.0.4",
     "reflect-metadata": "0.1.13",
@@ -170,7 +171,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",
@@ -178,8 +179,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",
@@ -210,7 +209,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",
@@ -233,6 +232,7 @@
   },
   "homepage": "https://github.com/Azure/cosmos-explorer",
   "prettier": {
-    "printWidth": 120
+    "printWidth": 120,
+    "endOfLine": "auto"
   }
 }

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

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

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

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

src/CellOutputViewer/cellOutputViewer.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/Common/Constants.ts

@@ -171,6 +171,7 @@ export class Areas {
   public static Tab: string = "Tab";
   public static ShareDialog: string = "Share Access Dialog";
   public static Notebook: string = "Notebook";
+  public static Copilot: string = "Copilot";
 }
 
 export class HttpHeaders {
@@ -271,7 +272,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);
 

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),
     );
   });
 });
@@ -125,7 +125,7 @@ describe("requestPlugin", () => {
       const headers = {};
       const endpoint = "https://docs.azure.com";
       const path = "/dbs/foo";
-      requestPlugin({ endpoint, headers, path } as any, next as any);
+      requestPlugin({ endpoint, headers, path } as any, undefined, next as any);
       expect(next.mock.calls[0][0]).toMatchSnapshot();
     });
   });
@@ -137,7 +137,7 @@ describe("requestPlugin", () => {
       const headers = {};
       const endpoint = "";
       const path = "/dbs/foo";
-      requestPlugin({ endpoint, headers, path } as any, next as any);
+      requestPlugin({ endpoint, headers, path } as any, undefined, next as any);
       expect(next.mock.calls[0][0]).toMatchSnapshot();
     });
   });

src/Common/CosmosClient.ts

@@ -1,12 +1,16 @@
 import * as Cosmos from "@azure/cosmos";
-import { configContext, Platform } from "../ConfigContext";
+import { sendCachedDataMessage } from "Common/MessageHandler";
+import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
+import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
+import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
+import { AuthType } from "../AuthType";
+import { PriorityLevel } from "../Common/Constants";
+import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
-import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -25,6 +29,36 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
+  if (configContext.platform === Platform.Fabric) {
+    switch (requestInfo.resourceType) {
+      case Cosmos.ResourceType.conflicts:
+      case Cosmos.ResourceType.container:
+      case Cosmos.ResourceType.sproc:
+      case Cosmos.ResourceType.udf:
+      case Cosmos.ResourceType.trigger:
+      case Cosmos.ResourceType.item:
+      case Cosmos.ResourceType.pkranges:
+        // User resource tokens
+        headers[HttpHeaders.msDate] = new Date().toUTCString();
+        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
+        return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
+
+      case Cosmos.ResourceType.none:
+      case Cosmos.ResourceType.database:
+      case Cosmos.ResourceType.offer:
+      case Cosmos.ResourceType.user:
+      case Cosmos.ResourceType.permission:
+        // User master tokens
+        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+          requestInfo,
+        ]);
+        console.log("Response from Fabric: ", authorizationToken);
+        headers[HttpHeaders.msDate] = authorizationToken.XDate;
+        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
+    }
+  }
+
   if (userContext.masterKey) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -40,7 +74,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   return decodeURIComponent(result.PrimaryReadWriteToken);
 };
 
-export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
+export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, diagnosticNode, next) => {
   requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
@@ -55,7 +89,11 @@ export const endpoint = () => {
   return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
 };
 
-export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
+export async function getTokenFromAuthService(
+  verb: string,
+  resourceType: string,
+  resourceId?: string,
+): Promise<AuthorizationToken> {
   try {
     const host = configContext.BACKEND_ENDPOINT;
     const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
@@ -94,6 +132,18 @@ export function client(): Cosmos.CosmosClient {
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
 
+  if (
+    userContext.authType === AuthType.ConnectionString ||
+    userContext.authType === AuthType.EncryptedToken ||
+    userContext.authType === AuthType.ResourceToken
+  ) {
+    // Default to low priority. Needed for non-AAD-auth scenarios
+    // where we cannot use RP API, and thus, cannot detect whether priority
+    // based execution is enabled.
+    // The header will be ignored if priority based execution is disabled on the account.
+    _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
+  }
+
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.masterKey,
@@ -109,7 +159,7 @@ export function client(): Cosmos.CosmosClient {
     (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
   }
 
-  if (userContext.features.enablePriorityBasedThrottling && userContext.apiType === "SQL") {
+  if (PriorityBasedExecutionUtils.isFeatureEnabled()) {
     const plugins = (options as any).plugins || [];
     plugins.push({ on: "request", plugin: PriorityBasedExecutionUtils.requestPlugin });
     (options as any).plugins = plugins;

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

src/Common/ErrorHandlingUtils.ts

@@ -51,6 +51,11 @@ const replaceKnownError = (errorMessage: string): string => {
     return "Database throughput is not supported for internal subscriptions.";
   } else if (errorMessage?.indexOf("Partition key paths must contain only valid") >= 0) {
     return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+  } else if (
+    errorMessage?.indexOf("The user aborted a request") >= 0 ||
+    errorMessage?.indexOf("The operation was aborted") >= 0
+  ) {
+    return "User aborted query.";
   }
 
   return errorMessage;

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

src/Common/MessageHandler.ts

@@ -22,7 +22,7 @@ export function handleCachedDataMessage(message: any): void {
   if (messageContent.error != null) {
     cachedDataPromise.deferred.reject(messageContent.error);
   } else {
-    cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
+    cachedDataPromise.deferred.resolve(messageContent.data);
   }
   runGarbageCollector();
 }
@@ -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",
   );
 }
 

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

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

src/Common/QueriesClient.ts

@@ -13,6 +13,7 @@ import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
 import { handleError } from "./ErrorHandlingUtils";
+import { isServerlessAccount } from "Utils/CapabilityUtils";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -32,25 +33,36 @@ export class QueriesClient {
     }
 
     const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
-    return createCollection({
+
-      collectionId: SavedQueries.CollectionName,
+    if (isServerlessAccount()) {
-      createNewDatabase: true,
+      return createCollection({
-      databaseId: SavedQueries.DatabaseName,
+        collectionId: SavedQueries.CollectionName,
-      partitionKey: QueriesClient.PartitionKey,
+        createNewDatabase: true,
-      offerThroughput: SavedQueries.OfferThroughput,
+        databaseId: SavedQueries.DatabaseName,
-      databaseLevelThroughput: false,
+        partitionKey: QueriesClient.PartitionKey,
-    })
+        databaseLevelThroughput: false,
-      .then(
+      });
-        (collection: DataModels.Collection) => {
+    } else {
-          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
+      return createCollection({
-          return Promise.resolve(collection);
+        collectionId: SavedQueries.CollectionName,
-        },
+        createNewDatabase: true,
-        (error: any) => {
+        databaseId: SavedQueries.DatabaseName,
-          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
+        partitionKey: QueriesClient.PartitionKey,
-          return Promise.reject(error);
+        offerThroughput: SavedQueries.OfferThroughput,
-        }
+        databaseLevelThroughput: false,
-      )
+      })
-      .finally(() => clearMessage());
+        .then(
+          (collection: DataModels.Collection) => {
+            NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
+            return Promise.resolve(collection);
+          },
+          (error: any) => {
+            handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
+            return Promise.reject(error);
+          },
+        )
+        .finally(() => clearMessage());
+    }
   }
 
   public async saveQuery(query: DataModels.Query): Promise<void> {
@@ -83,7 +95,7 @@ export class QueriesClient {
           }
           handleError(error, "saveQuery", `Failed to save query ${query.queryName}`);
           return Promise.reject(error);
-        }
+        },
       )
       .finally(() => clearMessage());
   }
@@ -102,7 +114,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 +164,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 +176,7 @@ export class QueriesClient {
         (error: any) => {
           handleError(error, "deleteQuery", `Failed to delete query ${query.queryName}`);
           return Promise.reject(error);
-        }
+        },
       )
       .finally(() => clearMessage());
   }
@@ -178,14 +190,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,
     );
   }
 

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}

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

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

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

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

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

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 {

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

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

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

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 {

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

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

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

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

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

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

src/Common/dataAccess/readCollections.ts

@@ -1,18 +1,57 @@
+import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
+
+  if (
+    configContext.platform === Platform.Fabric &&
+    userContext.fabricDatabaseConnectionInfo &&
+    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
+  ) {
+    const collections: DataModels.Collection[] = [];
+    const promises: Promise<ContainerResponse>[] = [];
+
+    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
+      // Dictionary key looks like this: dbs/SampleDB/colls/Container
+      const resourceIdObj = collectionResourceId.split("/");
+      const tokenDatabaseId = resourceIdObj[1];
+      const tokenCollectionId = resourceIdObj[3];
+
+      if (tokenDatabaseId === databaseId) {
+        promises.push(client().database(databaseId).container(tokenCollectionId).read());
+      }
+    }
+
+    try {
+      const responses = await Promise.all(promises);
+      responses.forEach((response) => {
+        collections.push(response.resource as DataModels.Collection);
+      });
+
+      // Sort collections by id before returning
+      collections.sort((a, b) => a.id.localeCompare(b.id));
+      return collections;
+    } catch (error) {
+      handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
+      throw error;
+    } finally {
+      clearMessage();
+    }
+  }
+
   try {
     if (
       userContext.authType === AuthType.AAD &&
@@ -34,7 +73,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 +84,7 @@ export async function readCollectionsWithPagination(
         {
           continuationToken,
           maxItemCount: Queries.containersPerPage,
-        }
+        },
       )
       .fetchNext();
     const collectionsWithPagination: DataModels.CollectionsWithPagination = {

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,15 +1,22 @@
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
+  if (configContext.platform === Platform.Fabric) {
+    // TODO This works, but is very slow, because it requests the token, so we skip for now
+    console.error("Skiping readDatabaseOffer for Fabric");
+    return undefined;
+  }
+
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
 
   try {

src/Common/dataAccess/readDatabases.ts

@@ -1,17 +1,53 @@
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
+
+  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
+    const tokensData = userContext.fabricDatabaseConnectionInfo;
+
+    const databaseIdsSet = new Set<string>(); // databaseId
+
+    for (const collectionResourceId in tokensData.resourceTokens) {
+      // Dictionary key looks like this: dbs/SampleDB/colls/Container
+      const resourceIdObj = collectionResourceId.split("/");
+
+      if (resourceIdObj.length !== 4) {
+        handleError(`Resource key not recognized: ${resourceIdObj}`, "ReadDatabases", `Error while querying databases`);
+        clearMessage();
+        return [];
+      }
+
+      const databaseId = resourceIdObj[1];
+
+      databaseIdsSet.add(databaseId);
+    }
+
+    const databases: DataModels.Database[] = Array.from(databaseIdsSet.values())
+      .sort((a, b) => a.localeCompare(b))
+      .map((databaseId) => ({
+        _rid: "",
+        _self: "",
+        _etag: "",
+        _ts: 0,
+        id: databaseId,
+        collections: [],
+      }));
+    clearMessage();
+    return databases;
+  }
+
   try {
     if (
       userContext.authType === AuthType.AAD &&

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;

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

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

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 {

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

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

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

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

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

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 {

src/Common/getAuthorizationTokenUsingResourceTokens.ts

@@ -0,0 +1,66 @@
+export function getAuthorizationTokenUsingResourceTokens(
+  resourceTokens: { [resourceId: string]: string },
+  path: string,
+  resourceId: string,
+): string {
+  // console.log(`getting token for path: "${path}" and resourceId: "${resourceId}"`);
+
+  if (resourceTokens && Object.keys(resourceTokens).length > 0) {
+    // For database account access(through getDatabaseAccount API), path and resourceId are "",
+    // so in this case we return the first token to be used for creating the auth header as the
+    // service will accept any token in this case
+    if (!path && !resourceId) {
+      return resourceTokens[Object.keys(resourceTokens)[0]];
+    }
+
+    // If we have exact resource token for the path use it
+    if (resourceId && resourceTokens[resourceId]) {
+      return resourceTokens[resourceId];
+    }
+
+    // minimum valid path /dbs
+    if (!path || path.length < 4) {
+      console.error(
+        `Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}". Invalid path.`,
+      );
+      return null;
+    }
+
+    path = trimSlashFromLeftAndRight(path);
+    const pathSegments = (path && path.split("/")) || [];
+
+    // Item path
+    if (pathSegments.length === 6) {
+      // Look for a container token matching the item path
+      const containerPath = pathSegments.slice(0, 4).map(decodeURIComponent).join("/");
+      if (resourceTokens[containerPath]) {
+        return resourceTokens[containerPath];
+      }
+    }
+
+    // This is legacy behavior that lets someone use a resource token pointing ONLY at an ID
+    // It was used when _rid was exposed by the SDK, but now that we are using user provided ids it is not needed
+    // However removing it now would be a breaking change
+    // if it's an incomplete path like /dbs/db1/colls/, start from the parent resource
+    let index = pathSegments.length % 2 === 0 ? pathSegments.length - 1 : pathSegments.length - 2;
+    for (; index > 0; index -= 2) {
+      const id = decodeURI(pathSegments[index]);
+      if (resourceTokens[id]) {
+        return resourceTokens[id];
+      }
+    }
+  }
+
+  console.error(`Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}"`);
+  return null;
+}
+
+const trimLeftSlashes = new RegExp("^[/]+");
+const trimRightSlashes = new RegExp("[/]+$");
+function trimSlashFromLeftAndRight(inputString: string): string {
+  if (typeof inputString !== "string") {
+    throw new Error("invalid input: input is not string");
+  }
+
+  return inputString.replace(trimLeftSlashes, "").replace(trimRightSlashes, "");
+}

src/ConfigContext.ts

@@ -1,3 +1,4 @@
+import { JunoEndpoints } from "Common/Constants";
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
@@ -61,6 +62,10 @@ 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$`,
+    `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -74,7 +79,7 @@ let configContext: Readonly<ConfigContext> = {
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
-  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
+  JUNO_ENDPOINT: JunoEndpoints.Prod,
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
@@ -115,7 +120,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
   if (
     !validateEndpoint(
       newContext.BACKEND_ENDPOINT,
-      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
     )
   ) {
     delete newContext.BACKEND_ENDPOINT;

src/Contracts/AzureResourceGraph.ts

@@ -0,0 +1,13 @@
+export interface QueryRequestOptions {
+  $skipToken?: string;
+  $top?: number;
+  subscriptions: string[];
+}
+
+export interface QueryResponse {
+  $skipToken: string;
+  count: number;
+  data: any;
+  resultTruncated: boolean;
+  totalRecords: number;
+}

src/Contracts/DataModels.ts

@@ -38,6 +38,7 @@ export interface DatabaseAccountExtendedProperties {
   locations?: DatabaseAccountResponseLocation[];
   postgresqlEndpoint?: string;
   publicNetworkAccess?: string;
+  enablePriorityBasedExecution?: boolean;
   vcoreMongoEndpoint?: string;
 }
 
@@ -87,13 +88,13 @@ export interface GenerateTokenResponse {
 }
 
 export interface Subscription {
-  uniqueDisplayName: string;
+  uniqueDisplayName?: string;
   displayName: string;
   subscriptionId: string;
-  tenantId: string;
+  tenantId?: string;
   state: string;
-  subscriptionPolicies: SubscriptionPolicies;
+  subscriptionPolicies?: SubscriptionPolicies;
-  authorizationSource: string;
+  authorizationSource?: string;
 }
 
 export interface SubscriptionPolicies {
@@ -317,7 +318,7 @@ export interface CreateCollectionParams {
   collectionId: string;
   databaseId: string;
   databaseLevelThroughput: boolean;
-  offerThroughput: number;
+  offerThroughput?: number;
   analyticalStorageTtl?: number;
   autoPilotMaxThroughput?: number;
   indexingPolicy?: IndexingPolicy;
@@ -456,8 +457,11 @@ export interface ContainerInfo {
 }
 
 export interface IProvisionData {
-  cosmosEndpoint: string;
+  cosmosEndpoint?: string;
   poolId: string;
+  databaseId?: string;
+  containerId?: string;
+  mode?: string;
 }
 
 export interface IContainerData {
@@ -600,3 +604,14 @@ export enum PhoenixErrorType {
   PhoenixFlightFallback = "PhoenixFlightFallback",
   UserMissingPermissionsError = "UserMissingPermissionsError",
 }
+
+export interface CopilotEnabledConfiguration {
+  isEnabled: boolean;
+}
+
+export interface FeatureRegistration {
+  name: string;
+  properties: {
+    state: string;
+  };
+}

src/Contracts/ExplorerContracts.ts

@@ -1,46 +1,6 @@
+import { MessageTypes } from "Contracts/MessageTypes";
 import * as ActionContracts from "./ActionContracts";
 import * as Diagnostics from "./Diagnostics";
 import * as Versions from "./Versions";
 
-/**
+export { ActionContracts, Diagnostics, MessageTypes, Versions };
- * Messaging types used with Data Explorer <-> Portal communication
- * and Hosted <-> Explorer communication
- */
-export enum MessageTypes {
-  TelemetryInfo,
-  LogInfo,
-  RefreshResources,
-  AllDatabases,
-  CollectionsForDatabase,
-  RefreshOffers,
-  AllOffers,
-  UpdateLocationHash,
-  SingleOffer,
-  RefreshOffer,
-  UpdateAccountName,
-  ForbiddenError,
-  AadSignIn,
-  GetAccessAadRequest,
-  GetAccessAadResponse,
-  UpdateAccountSwitch,
-  UpdateDirectoryControl,
-  SwitchAccount,
-  SendNotification,
-  ClearNotification,
-  ExplorerClickEvent,
-  LoadingStatus,
-  GetArcadiaToken,
-  CreateWorkspace,
-  CreateSparkPool,
-  RefreshDatabaseAccount,
-  CloseTab,
-  OpenQuickstartBlade,
-  OpenPostgreSQLPasswordReset,
-  OpenPostgresNetworkingBlade,
-  OpenCosmosDBNetworkingBlade,
-  DisplayNPSSurvey,
-  OpenVCoreMongoNetworkingBlade,
-  OpenVCoreMongoConnectionStringsBlade,
-}
-
-export { ActionContracts, Diagnostics, Versions };

src/Contracts/FabricContract.ts

@@ -0,0 +1,77 @@
+import { AuthorizationToken, MessageTypes } from "./MessageTypes";
+
+export type FabricMessage =
+  | {
+      type: "newContainer";
+      databaseName: string;
+    }
+  | {
+      type: "initialize";
+      message: {
+        endpoint: string | undefined;
+        databaseId: string | undefined;
+        resourceTokens: unknown | undefined;
+        resourceTokensTimestamp: number | undefined;
+        error: string | undefined;
+      };
+    }
+  | {
+      type: "authorizationToken";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: AuthorizationToken | undefined;
+      };
+    }
+  | {
+      type: "allResourceTokens";
+      message: {
+        endpoint: string | undefined;
+        databaseId: string | undefined;
+        resourceTokens: unknown | undefined;
+        resourceTokensTimestamp: number | undefined;
+      };
+    };
+
+export type DataExploreMessage =
+  | "ready"
+  | {
+      type: MessageTypes.TelemetryInfo;
+      data: {
+        action: "LoadDatabases";
+        actionModifier: "success" | "start";
+        defaultExperience: "SQL";
+      };
+    }
+  | {
+      type: MessageTypes.GetAuthorizationToken;
+      id: string;
+      params: GetCosmosTokenMessageOptions[];
+    }
+  | {
+      type: MessageTypes.GetAllResourceTokens;
+    };
+
+export type GetCosmosTokenMessageOptions = {
+  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
+  resourceId: string;
+};
+
+export type CosmosDBTokenResponse = {
+  token: string;
+  date: string;
+};
+
+export type CosmosDBConnectionInfoResponse = {
+  endpoint: string;
+  databaseId: string;
+  resourceTokens: unknown;
+};
+
+export interface FabricDatabaseConnectionInfo {
+  endpoint: string;
+  databaseId: string;
+  resourceTokens: { [resourceId: string]: string };
+  resourceTokensTimestamp: number;
+}

src/Contracts/MessageTypes.ts

@@ -0,0 +1,49 @@
+/**
+ * Messaging types used with Data Explorer <-> Portal communication,
+ * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
+ */
+export enum MessageTypes {
+  TelemetryInfo,
+  LogInfo,
+  RefreshResources,
+  AllDatabases,
+  CollectionsForDatabase,
+  RefreshOffers,
+  AllOffers,
+  UpdateLocationHash,
+  SingleOffer,
+  RefreshOffer,
+  UpdateAccountName,
+  ForbiddenError,
+  AadSignIn,
+  GetAccessAadRequest,
+  GetAccessAadResponse,
+  UpdateAccountSwitch,
+  UpdateDirectoryControl,
+  SwitchAccount,
+  SendNotification,
+  ClearNotification,
+  ExplorerClickEvent,
+  LoadingStatus,
+  GetArcadiaToken,
+  CreateWorkspace,
+  CreateSparkPool,
+  RefreshDatabaseAccount,
+  CloseTab,
+  OpenQuickstartBlade,
+  OpenPostgreSQLPasswordReset,
+  OpenPostgresNetworkingBlade,
+  OpenCosmosDBNetworkingBlade,
+  DisplayNPSSurvey,
+  OpenVCoreMongoNetworkingBlade,
+  OpenVCoreMongoConnectionStringsBlade,
+
+  // Data Explorer -> Fabric communication
+  GetAuthorizationToken,
+  GetAllResourceTokens,
+}
+
+export interface AuthorizationToken {
+  XDate: string;
+  PrimaryReadWriteToken: string;
+}

src/Controls/Heatmap/Heatmap.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html class="no-js" lang="en">
   <head>
     <meta charset="utf-8" />

src/Controls/Heatmap/Heatmap.ts

@@ -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) => {

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"

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;

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>
+      jqXHR: JQueryXHR<T>,
-    ) => JQueryTransport
+    ) => 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
+      headers?: string,
-    ) => any
+    ) => 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;
 

src/Definitions/less.d.ts

@@ -0,0 +1,4 @@
+declare module "*.less" {
+  const value: string;
+  export default value;
+}

src/Explorer/ContextMenuButtonFactory.tsx

@@ -57,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",
@@ -68,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") {
@@ -129,20 +129,22 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  items.push({
+  if (configContext.platform !== Platform.Fabric) {
-    iconSrc: DeleteCollectionIcon,
+    items.push({
-    onClick: () => {
+      iconSrc: DeleteCollectionIcon,
-      useSelectedNode.getState().setSelectedNode(selectedCollection);
+      onClick: () => {
-      useSidePanel
+        useSelectedNode.getState().setSelectedNode(selectedCollection);
-        .getState()
+        useSidePanel
-        .openSidePanel(
+          .getState()
-          "Delete " + getCollectionName(),
+          .openSidePanel(
-          <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />
+            "Delete " + getCollectionName(),
-        );
+            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
-    },
+          );
-    label: `Delete ${getCollectionName()}`,
+      },
-    styleClass: "deleteCollectionMenuItem",
+      label: `Delete ${getCollectionName()}`,
-  });
+      styleClass: "deleteCollectionMenuItem",
+    });
+  }
 
   return items;
 };
@@ -175,7 +177,7 @@ export const createSampleCollectionContextMenuButton = (): TreeNodeMenuItem[] =>
 
 export const createStoreProcedureContextMenuItems = (
   container: Explorer,
-  storedProcedure: StoredProcedure
+  storedProcedure: StoredProcedure,
 ): TreeNodeMenuItem[] => {
   if (userContext.apiType === "Cassandra") {
     return [];
@@ -206,7 +208,7 @@ export const createTriggerContextMenuItems = (container: Explorer, trigger: Trig
 
 export const createUserDefinedFunctionContextMenuItems = (
   container: Explorer,
-  userDefinedFunction: UserDefinedFunction
+  userDefinedFunction: UserDefinedFunction,
 ): TreeNodeMenuItem[] => {
   if (userContext.apiType === "Cassandra") {
     return [];

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -203,11 +203,9 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           }}
         >
           <div className="commandDropdown">
-            {this.props.children.map(
+            {this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
-              (c: CommandButtonComponentProps, index: number): JSX.Element => {
+              return CommandButtonComponent.renderButton(c, `${index}`);
-                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 />;

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

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,

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -48,7 +48,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentDidUpdate(previous: EditorReactProps) {
     if (this.props.content !== previous.content) {
-      this.editor.setValue(this.props.content);
+      this.editor?.setValue(this.props.content);
     }
   }
 
@@ -84,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);
-        }
+        },
       );
     }
   }
@@ -111,7 +111,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
-    createCallback(monaco.editor.create(this.rootNode, options));
+    createCallback(monaco?.editor?.create(this.rootNode, options));
 
     if (this.rootNode.innerHTML) {
       this.setState({

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

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

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) => {

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>

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

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

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>

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

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

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

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

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -251,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) {
@@ -357,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);
@@ -431,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;
     }
@@ -566,7 +566,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         this.collection.databaseId,
         this.collection.id(),
         this.state.conflictResolutionPolicyProcedure,
-        false
+        false,
       );
     }
 
@@ -640,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;
@@ -780,7 +780,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: this.props.settingsTab.tabTitle(),
       },
-      startKey
+      startKey,
     );
   };
 
@@ -828,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);
@@ -862,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();
@@ -881,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(
@@ -895,7 +895,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
             error: getErrorMessage(error),
             errorStack: getErrorStack(error),
           },
-          startKey
+          startKey,
         );
         throw error;
       }
@@ -942,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") {

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -179,7 +179,7 @@ export const getRuPriceBreakdown = (
   serverId: string,
   numberOfRegions: number,
   isMultimaster: boolean,
-  isAutoscale: boolean
+  isAutoscale: boolean,
 ): PriceBreakdown => {
   const hourlyPrice: number = computeRUUsagePriceHourly({
     serverId: serverId,
@@ -207,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 (
@@ -279,7 +279,7 @@ export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThrou
 
 export const getUpdateThroughputBeyondSupportLimitMessage = (
   instantMaximumThroughput: number,
-  maximumThroughput: number
+  maximumThroughput: number,
 ): JSX.Element => {
   return (
     <>
@@ -333,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 {
@@ -366,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
@@ -382,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.
@@ -398,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
@@ -480,7 +480,7 @@ export const mongoIndexTransformationRefreshingMessage: JSX.Element = (
 
 export const renderMongoIndexTransformationRefreshMessage = (
   progress: number,
-  performRefresh: () => void
+  performRefresh: () => void,
 ): JSX.Element => {
   if (progress === 0) {
     return (
@@ -516,7 +516,7 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
 export const getChoiceGroupStyles = (
   current: isDirtyTypes,
   baseline: isDirtyTypes,
-  isHorizontal?: boolean
+  isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
   flexContainer: [
     {

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}

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;

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

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

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 (

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

@@ -113,7 +113,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         throughput,
         throughputUnit,
         this.databaseId,
-        this.collectionId
+        this.collectionId,
       );
     }
 
@@ -122,7 +122,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
 
   public getLongDelayMessage = (): JSX.Element => {
     const matches: string[] = this.props.initialNotification?.description.match(
-      `Throughput update for (.*) ${throughputUnit}`
+      `Throughput update for (.*) ${throughputUnit}`,
     );
 
     const throughput = this.props.throughputBaseline;
@@ -134,7 +134,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         throughputUnit,
         this.databaseId,
         this.collectionId,
-        targetThroughput
+        targetThroughput,
       );
     }
     return <></>;

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

@@ -145,7 +145,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
 
   private onTimeToLiveSecondsChange = (
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
   ): void => {
     const newTimeToLiveSeconds = getSanitizedInputValue(newValue, Int32.Max);
     this.props.onDisplayedTtlSecondsChange(newTimeToLiveSeconds.toString());
@@ -154,18 +154,18 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
 
   private onGeoSpatialConfigTypeChange = (
     ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
+    option?: IChoiceGroupOption,
   ): void =>
     this.props.onGeoSpatialConfigTypeChange(GeospatialConfigType[option.key as keyof typeof GeospatialConfigType]);
 
   private onAnalyticalStorageTtlSelectionChange = (
     ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
+    option?: IChoiceGroupOption,
   ): void => this.props.onAnalyticalStorageTtlSelectionChange(this.getTtlValue(option.key));
 
   private onAnalyticalStorageTtlSecondsChange = (
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
   ): void => {
     const newAnalyticalStorageTtlSeconds = getSanitizedInputValue(newValue, Int32.Max);
     this.props.onAnalyticalStorageTtlSecondsChange(newAnalyticalStorageTtlSeconds);
@@ -173,7 +173,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
 
   private onChangeFeedPolicyChange = (
     ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
+    option?: IChoiceGroupOption,
   ): void =>
     this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);
 
@@ -218,6 +218,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
             value={this.props.displayedTtlSeconds}
             onChange={this.onTimeToLiveSecondsChange}
             suffix="second(s)"
+            ariaLabel={`Time to live in seconds`}
           />
         )}
       </Stack>
@@ -239,7 +240,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         onChange={this.onAnalyticalStorageTtlSelectionChange}
         styles={getChoiceGroupStyles(
           this.props.analyticalStorageTtlSelection,
-          this.props.analyticalStorageTtlSelectionBaseline
+          this.props.analyticalStorageTtlSelectionBaseline,
         )}
       />
       {this.props.analyticalStorageTtlSelection === TtlType.On && (
@@ -247,7 +248,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
           id="analyticalStorageTimeToLiveSeconds"
           styles={getTextFieldStyles(
             this.props.analyticalStorageTtlSeconds,
-            this.props.analyticalStorageTtlSecondsBaseline
+            this.props.analyticalStorageTtlSecondsBaseline,
           )}
           type="number"
           required

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

@@ -202,7 +202,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         userContext.portalEnv,
         regions,
         multimaster,
-        isDirty ? this.props.maxAutoPilotThroughput : undefined
+        isDirty ? this.props.maxAutoPilotThroughput : undefined,
       );
     } else {
       estimatedSpend = this.getEstimatedManualSpendElement(
@@ -211,7 +211,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         userContext.portalEnv,
         regions,
         multimaster,
-        isDirty ? this.props.throughput : undefined
+        isDirty ? this.props.throughput : undefined,
       );
     }
     return estimatedSpend;
@@ -222,7 +222,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     serverId: string,
     numberOfRegions: number,
     isMultimaster: boolean,
-    newThroughput?: number
+    newThroughput?: number,
   ): JSX.Element => {
     const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
 
@@ -232,7 +232,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         serverId,
         numberOfRegions,
         isMultimaster,
-        true
+        true,
       );
       return (
         <div>
@@ -275,7 +275,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     serverId: string,
     numberOfRegions: number,
     isMultimaster: boolean,
-    newThroughput?: number
+    newThroughput?: number,
   ): JSX.Element => {
     const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
 
@@ -285,7 +285,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         serverId,
         numberOfRegions,
         isMultimaster,
-        true
+        true,
       );
       return (
         <div>
@@ -331,7 +331,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private onAutoPilotThroughputChange = (
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
   ): void => {
     const newThroughput = getSanitizedInputValue(newValue);
     this.props.onMaxAutoPilotThroughputChange(newThroughput);
@@ -339,7 +339,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private onThroughputChange = (
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
+    newValue?: string,
   ): void => {
     const newThroughput = getSanitizedInputValue(newValue);
     if (this.overrideWithAutoPilotSettings()) {
@@ -354,7 +354,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private onChoiceGroupChange = (
     event?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
+    option?: IChoiceGroupOption,
   ): void => {
     this.props.onAutoPilotSelected(option.key === "true");
     TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
@@ -557,7 +557,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       case "requireSupport":
         return getUpdateThroughputBeyondSupportLimitMessage(
           this.props.instantMaximumThroughput,
-          this.props.softAllowedMaximumThroughput
+          this.props.softAllowedMaximumThroughput,
         );
       default:
         return <></>;

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

@@ -62,6 +62,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       }
     />
     <StyledTextFieldBase
+      ariaLabel="Time to live in seconds"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -295,6 +296,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       }
     />
     <StyledTextFieldBase
+      ariaLabel="Time to live in seconds"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -583,6 +585,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       }
     />
     <StyledTextFieldBase
+      ariaLabel="Time to live in seconds"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}
@@ -831,6 +834,7 @@ exports[`SubSettingsComponent renders 1`] = `
       }
     />
     <StyledTextFieldBase
+      ariaLabel="Time to live in seconds"
       id="timeToLiveSeconds"
       max={2147483647}
       min={1}

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

@@ -122,7 +122,7 @@ describe("SettingsUtils", () => {
 
     notification = getMongoNotification(singleIndexDescription, MongoIndexTypes.Wildcard);
     expect(notification.message).toEqual(
-      "Wildcard path is not present in the field name. Use a pattern like " + MongoWildcardPlaceHolder
+      "Wildcard path is not present in the field name. Use a pattern like " + MongoWildcardPlaceHolder,
     );
     expect(notification.type).toEqual(MongoNotificationType.Error);
   });

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -5,7 +5,7 @@ import Explorer from "../../Explorer";
 
 export const container = new Explorer();
 
-export const collection = ({
+export const collection = {
   container: container,
   databaseId: "test",
   id: ko.observable<string>("test"),
@@ -27,7 +27,7 @@ export const collection = ({
     offerReplacePending: false,
   }),
   conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
-    {} as DataModels.ConflictResolutionPolicy
+    {} as DataModels.ConflictResolutionPolicy,
   ),
   changeFeedPolicy: ko.observable<DataModels.ChangeFeedPolicy>({} as DataModels.ChangeFeedPolicy),
   geospatialConfig: ko.observable<DataModels.GeospatialConfig>({} as DataModels.GeospatialConfig),
@@ -43,4 +43,4 @@ export const collection = ({
   readSettings: () => {
     return;
   },
-} as unknown) as ViewModels.Collection;
+} as unknown as ViewModels.Collection;

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -122,7 +122,7 @@ describe("SmartUiComponent", () => {
         getTranslation={(key: string) => {
           return key;
         }}
-      />
+      />,
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();
@@ -153,7 +153,7 @@ describe("SmartUiComponent", () => {
         getTranslation={(key: string) => {
           return key;
         }}
-      />
+      />,
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -14,3 +14,7 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
+.capacitycalculator-link:focus{
+  text-decoration: underline;
+  outline-offset: 2px;
+}

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

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

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -36,7 +36,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 }: ThroughputInputProps) => {
   const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
   const [throughput, setThroughput] = useState<number>(
-    isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K
+    isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K,
   );
   const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
   const [throughputError, setThroughputError] = useState<string>("");
@@ -71,7 +71,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       setThroughputError(
         `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
           totalThroughput + throughput * numberOfRegions
-        } RU/s. Change total throughput limit in cost management.`
+        } RU/s. Change total throughput limit in cost management.`,
       );
 
       setIsThroughputCapExceeded(true);
@@ -83,7 +83,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       setThroughputError(
         `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
           totalThroughputUsed + newThroughput * numberOfRegions
-        } RU/s. Change total throughput limit in cost management.`
+        } RU/s. Change total throughput limit in cost management.`,
       );
       setIsThroughputCapExceeded(true);
       return false;
@@ -151,7 +151,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       userContext.portalEnv,
       numberOfRegions,
       multimasterEnabled,
-      isAutoscaleSelected
+      isAutoscaleSelected,
     );
   };
 

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -222,7 +222,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       node.children.reduce(
         (previous: boolean, child: TreeNode) =>
           previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
-        false
+        false,
       )
     );
   }

src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx

@@ -9,8 +9,11 @@ import {
   Tree,
   TreeItem,
   TreeItemLayout,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
 } from "@fluentui/react-components";
 import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
 import * as React from "react";
 
 export interface TreeNode2MenuItem {
@@ -27,7 +30,7 @@ export interface TreeNode2 {
   children?: TreeNode2[];
   contextMenu?: TreeNode2MenuItem[];
   iconSrc?: string;
-  // isExpanded?: boolean;
+  isExpanded?: boolean;
   className?: string;
   isAlphaSorted?: boolean;
   // data?: any; // Piece of data corresponding to this node
@@ -37,7 +40,7 @@ export interface TreeNode2 {
   isScrollable?: boolean;
   isSelected?: () => boolean;
   onClick?: () => void; // Only if a leaf, other click will expand/collapse
-  onExpanded?: () => void;
+  onExpanded?: () => Promise<void>;
   onCollapsed?: () => void;
   onContextMenuOpen?: () => void;
 }
@@ -46,7 +49,6 @@ export interface TreeNode2ComponentProps {
   node: TreeNode2;
   className?: string;
   treeNodeId: string;
-  globalOpenIds: string[];
 }
 
 const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 20, height: 20 }} />;
@@ -54,20 +56,8 @@ const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt=""
 export const TreeNode2Component: React.FC<TreeNode2ComponentProps> = ({
   node,
   treeNodeId,
-  globalOpenIds,
 }: TreeNode2ComponentProps): JSX.Element => {
-  // const defaultOpenItems = node.isExpanded ? children?.map((child: TreeNode2) => child.label) : undefined;
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-
-  // Compute whether node is expanded
-  React.useEffect(() => {
-    const isNowExpanded = globalOpenIds && globalOpenIds.includes(treeNodeId);
-    if (!isExpanded && isNowExpanded) {
-      // Catch the transition non-expanded to expanded
-      node.onExpanded?.();
-    }
-    setIsExpanded(isNowExpanded);
-  }, [globalOpenIds, treeNodeId, node, isExpanded]);
 
   const getSortedChildren = (treeNode: TreeNode2): TreeNode2[] => {
     if (!treeNode || !treeNode.children) {
@@ -95,8 +85,24 @@ export const TreeNode2Component: React.FC<TreeNode2ComponentProps> = ({
     return unsortedChildren;
   };
 
+  const onOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+    if (!node.isExpanded && data.open && node.onExpanded) {
+      // Catch the transition non-expanded to expanded
+      setIsLoading(true);
+      node.onExpanded?.().then(() => setIsLoading(false));
+    } else if (node.isExpanded && !data.open && node.onCollapsed) {
+      // Catch the transition expanded to non-expanded
+      node.onCollapsed?.();
+    }
+  };
+
   return (
-    <TreeItem value={treeNodeId} itemType={node.children !== undefined ? "branch" : "leaf"} style={{ height: "100%" }}>
+    <TreeItem
+      value={treeNodeId}
+      itemType={node.children !== undefined ? "branch" : "leaf"}
+      style={{ height: "100%" }}
+      onOpenChange={onOpenChange}
+    >
       <TreeItemLayout
         className={node.className}
         actions={
@@ -117,22 +123,21 @@ export const TreeNode2Component: React.FC<TreeNode2ComponentProps> = ({
             </Menu>
           )
         }
-        expandIcon={node.isLoading ? <Spinner size="extra-tiny" /> : undefined}
+        expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
         iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
+        style={{
+          backgroundColor: node.isSelected && node.isSelected() ? tokens.colorNeutralBackground1Selected : undefined,
+        }}
       >
         <span onClick={() => node.onClick?.()}>{node.label}</span>
       </TreeItemLayout>
       {!node.isLoading && node.children?.length > 0 && (
-        <Tree
+        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
-          // defaultOpenItems={defaultOpenItems}
-          style={{ overflow: node.isScrollable ? "auto" : undefined }}
-        >
           {getSortedChildren(node).map((childNode: TreeNode2) => (
             <TreeNode2Component
               key={childNode.label}
               node={childNode}
               treeNodeId={`${treeNodeId}/${childNode.label}`}
-              globalOpenIds={globalOpenIds}
             />
           ))}
         </Tree>