From 0049bbf39c302b851008e59d4824f421c1fa3c79 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 08:45:59 -0400
Subject: [PATCH 01/14] Bump react-router-dom from 5.3.0 to 5.3.1 (#5258)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index d56b6a3cd8..6235c319c9 100644
--- a/package.json
+++ b/package.json
@@ -382,7 +382,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-refresh": "^0.11.0",
     "react-refresh-typescript": "^2.0.4",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^5.3.1",
     "react-select": "3.2.0",
     "react-select-event": "^5.3.0",
     "react-table": "^7.7.0",
diff --git a/yarn.lock b/yarn.lock
index 21533604ee..2e2da58d14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11021,23 +11021,23 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
-  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+react-router-dom@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.1.tgz#0151baf2365c5fcd8493f6ec9b9b31f34d0f8ae1"
+  integrity sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==
   dependencies:
     "@babel/runtime" "^7.12.13"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.2.1"
+    react-router "5.3.1"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.2.1, react-router@^5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
-  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+react-router@5.3.1, react-router@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.1.tgz#b13e84a016c79b9e80dde123ca4112c4f117e3cf"
+  integrity sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==
   dependencies:
     "@babel/runtime" "^7.12.13"
     history "^4.9.0"

From b8993a70586a1332c891b90e9cd533159df58bdc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 08:46:12 -0400
Subject: [PATCH 02/14] Bump esbuild from 0.14.34 to 0.14.36 (#5260)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |   2 +-
 yarn.lock    | 208 +++++++++++++++++++++++++--------------------------
 2 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/package.json b/package.json
index 6235c319c9..6371d26195 100644
--- a/package.json
+++ b/package.json
@@ -349,7 +349,7 @@
     "electron": "^14.2.9",
     "electron-builder": "^23.0.3",
     "electron-notarize": "^0.3.0",
-    "esbuild": "^0.14.34",
+    "esbuild": "^0.14.36",
     "esbuild-loader": "^2.18.0",
     "eslint": "^8.11.0",
     "eslint-plugin-header": "^3.1.1",
diff --git a/yarn.lock b/yarn.lock
index 2e2da58d14..1b68df8ebd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5137,75 +5137,75 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-esbuild-android-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.34.tgz#46bc4327dd0809937912346244eaffdb9bfc980d"
-  integrity sha512-XfxcfJqmMYsT/LXqrptzFxmaR3GWzXHDLdFNIhm6S00zPaQF1TBBWm+9t0RZ6LRR7iwH57DPjaOeW20vMqI4Yw==
+esbuild-android-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.36.tgz#fc5f95ce78c8c3d790fa16bc71bd904f2bb42aa1"
+  integrity sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==
 
-esbuild-android-arm64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.34.tgz#a3f7e1ad84b8a7dcb39b5e132768b56ee7133656"
-  integrity sha512-T02+NXTmSRL1Mc6puz+R9CB54rSPICkXKq6+tw8B6vxZFnCPzbJxgwIX4kcluz9p8nYBjF3+lSilTGWb7+Xgew==
+esbuild-android-arm64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.36.tgz#44356fbb9f8de82a5cdf11849e011dfb3ad0a8a8"
+  integrity sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==
 
-esbuild-darwin-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.34.tgz#a0e4ab7a0cddf76761f1fb5d6bf552a376beb16e"
-  integrity sha512-pLRip2Bh4Ng7Bf6AMgCrSp3pPe/qZyf11h5Qo2mOfJqLWzSVjxrXW+CFRJfrOVP7TCnh/gmZSM2AFdCPB72vtw==
+esbuild-darwin-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.36.tgz#3d9324b21489c70141665c2e740d6e84f16f725d"
+  integrity sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==
 
-esbuild-darwin-arm64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.34.tgz#54c35461f82f83a7f5169d9a6a54201798977b07"
-  integrity sha512-vpidSJEBxx6lf1NWgXC+DCmGqesJuZ5Y8aQVVsaoO4i8tRXbXb0whChRvop/zd3nfNM4dIl5EXAky0knRX5I6w==
+esbuild-darwin-arm64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.36.tgz#2a8040c2e465131e5281034f3c72405e643cb7b2"
+  integrity sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==
 
-esbuild-freebsd-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.34.tgz#aebb50248f5874d04ffeab2db8ee1ed6037e2654"
-  integrity sha512-m0HBjePhe0hAQJgtMRMNV9kMgIyV4/qSnzPx42kRMQBcPhgjAq1JRu4Il26czC+9FgpMbFkUktb07f/Lwnc6CA==
+esbuild-freebsd-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.36.tgz#d82c387b4d01fe9e8631f97d41eb54f2dbeb68a3"
+  integrity sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==
 
-esbuild-freebsd-arm64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.34.tgz#09bef288e29f18b38b0c70a9827b6ee718e36c7f"
-  integrity sha512-cpRc2B94L1KvMPPYB4D6G39jLqpKlD3noAMY4/e86iXXXkhUYJJEtTuyNFTa9JRpWM0xCAp4mxjHjoIiLuoCLA==
+esbuild-freebsd-arm64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.36.tgz#e8ce2e6c697da6c7ecd0cc0ac821d47c5ab68529"
+  integrity sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==
 
-esbuild-linux-32@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.34.tgz#67790061758e008e919e65bbc34549f55dadaca7"
-  integrity sha512-8nQaEaoW7MH/K/RlozJa+lE1ejHIr8fuPIHhc513UebRav7HtXgQvxHQ6VZRUkWtep23M6dd7UqhwO1tMOfzQQ==
+esbuild-linux-32@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.36.tgz#a4a261e2af91986ea62451f2db712a556cb38a15"
+  integrity sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==
 
-esbuild-linux-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.34.tgz#b9b19d4ac07e37495dd2508ec843418aa71c98d6"
-  integrity sha512-Y3of4qQoLLlAgf042MlrY1P+7PnN9zWj8nVtw9XQG5hcLOZLz7IKpU35oeu7n4wvyaZHwvQqDJ93gRLqdJekcQ==
+esbuild-linux-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.36.tgz#4a9500f9197e2c8fcb884a511d2c9d4c2debde72"
+  integrity sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==
 
-esbuild-linux-arm64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.34.tgz#fd84b11a6ccfe9e83e00d0c45890e9fb3a7248c1"
-  integrity sha512-IlWaGtj9ir7+Nrume1DGcyzBDlK8GcnJq0ANKwcI9pVw8tqr+6GD0eqyF9SF1mR8UmAp+odrx1H5NdR2cHdFHA==
+esbuild-linux-arm64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.36.tgz#c91c21e25b315464bd7da867365dd1dae14ca176"
+  integrity sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==
 
-esbuild-linux-arm@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.34.tgz#c89d4714b05265a315a97c8933508cc73950e683"
-  integrity sha512-9lpq1NcJqssAF7alCO6zL3gvBVVt/lKw4oetUM7OgNnRX0OWpB+ZIO9FwCrSj/dMdmgDhPLf+119zB8QxSMmAg==
+esbuild-linux-arm@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.36.tgz#90e23bca2e6e549affbbe994f80ba3bb6c4d934a"
+  integrity sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==
 
-esbuild-linux-mips64le@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.34.tgz#d60752c3fb1260dd0737532af2de2a9521656456"
-  integrity sha512-k3or+01Rska1AjUyNjA4buEwB51eyN/xPQAoOx1CjzAQC3l8rpjUDw55kXyL63O/1MUi4ISvtNtl8gLwdyEcxw==
+esbuild-linux-mips64le@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.36.tgz#40e11afb08353ff24709fc89e4db0f866bc131d2"
+  integrity sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==
 
-esbuild-linux-ppc64le@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.34.tgz#f4c6229269956564f0c6f9825f5e717c2cfc22b3"
-  integrity sha512-+qxb8M9FfM2CJaVU7GgYpJOHM1ngQOx+/VrtBjb4C8oVqaPcESCeg2anjl+HRZy8VpYc71q/iBYausPPbJ+Keg==
+esbuild-linux-ppc64le@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.36.tgz#9e8a588c513d06cc3859f9dcc52e5fdfce8a1a5e"
+  integrity sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==
 
-esbuild-linux-riscv64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.34.tgz#549bd18a9eba3135b67f7b742730b5343a1be35d"
-  integrity sha512-Y717ltBdQ5j5sZIHdy1DV9kieo0wMip0dCmVSTceowCPYSn1Cg33Kd6981+F/3b9FDMzNWldZFOBRILViENZSA==
+esbuild-linux-riscv64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.36.tgz#e578c09b23b3b97652e60e3692bfda628b541f06"
+  integrity sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==
 
-esbuild-linux-s390x@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.34.tgz#2a6b577c437f94c2b37623c755ff5215a05c12bc"
-  integrity sha512-bDDgYO4LhL4+zPs+WcBkXph+AQoPcQRTv18FzZS0WhjfH8TZx2QqlVPGhmhZ6WidrY+jKthUqO6UhGyIb4MpmA==
+esbuild-linux-s390x@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.36.tgz#3c9dab40d0d69932ffded0fd7317bb403626c9bc"
+  integrity sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==
 
 esbuild-loader@^2.18.0:
   version "2.18.0"
@@ -5219,61 +5219,61 @@ esbuild-loader@^2.18.0:
     tapable "^2.2.0"
     webpack-sources "^2.2.0"
 
-esbuild-netbsd-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.34.tgz#7f0b73229157975eb35597207723df52ba21722a"
-  integrity sha512-cfaFGXdRt0+vHsjNPyF0POM4BVSHPSbhLPe8mppDc7GDDxjIl08mV1Zou14oDWMp/XZMjYN1kWYRSfftiD0vvQ==
+esbuild-netbsd-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.36.tgz#e27847f6d506218291619b8c1e121ecd97628494"
+  integrity sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==
 
-esbuild-openbsd-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.34.tgz#b9bc44b4f70031fb01b173b279daeffc4d4f54b7"
-  integrity sha512-vmy9DxXVnRiI14s8GKuYBtess+EVcDALkbpTqd5jw4XITutIzyB7n4x0Tj5utAkKsgZJB22lLWGekr0ABnSLow==
+esbuild-openbsd-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.36.tgz#c94c04c557fae516872a586eae67423da6d2fabb"
+  integrity sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==
 
-esbuild-sunos-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.34.tgz#512dd6085ac1a0dccc20c5f932f16a618bea409c"
-  integrity sha512-eNPVatNET1F7tRMhii7goL/eptfxc0ALRjrj9SPFNqp0zmxrehBFD6BaP3R4LjMn6DbMO0jOAnTLFKr8NqcJAA==
+esbuild-sunos-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.36.tgz#9b79febc0df65a30f1c9bd63047d1675511bf99d"
+  integrity sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==
 
-esbuild-windows-32@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.34.tgz#3ff1afd5cac08050c7c7140a59e343b06f6b037c"
-  integrity sha512-EFhpXyHEcnqWYe2rAHFd8dRw8wkrd9U+9oqcyoEL84GbanAYjiiIjBZsnR8kl0sCQ5w6bLpk7vCEIA2VS32Vcg==
+esbuild-windows-32@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.36.tgz#910d11936c8d2122ffdd3275e5b28d8a4e1240ec"
+  integrity sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==
 
-esbuild-windows-64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.34.tgz#66f7b43d2a0b132f6748dfa3edac4fc939a99be0"
-  integrity sha512-a8fbl8Ky7PxNEjf1aJmtxdDZj32/hC7S1OcA2ckEpCJRTjiKslI9vAdPpSjrKIWhws4Galpaawy0nB7fjHYf5Q==
+esbuild-windows-64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.36.tgz#21b4ce8b42a4efc63f4b58ec617f1302448aad26"
+  integrity sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==
 
-esbuild-windows-arm64@0.14.34:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.34.tgz#b74a6395b7b7e53dba70b71b39542afd83352473"
-  integrity sha512-EYvmKbSa2B3sPnpC28UEu9jBK5atGV4BaVRE7CYGUci2Hlz4AvtV/LML+TcDMT6gBgibnN2gcltWclab3UutMg==
+esbuild-windows-arm64@0.14.36:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.36.tgz#ba21546fecb7297667d0052d00150de22c044b24"
+  integrity sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==
 
-esbuild@^0.14.34, esbuild@^0.14.6:
-  version "0.14.34"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.34.tgz#3610056f0a57bcfd0b63ddaafdb2e3bef1cf96e4"
-  integrity sha512-QIWdPT/gFF6hCaf4m7kP0cJ+JIuFkdHibI7vVFvu3eJS1HpVmYHWDulyN5WXwbRA0SX/7ZDaJ/1DH8SdY9xOJg==
+esbuild@^0.14.36, esbuild@^0.14.6:
+  version "0.14.36"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.36.tgz#0023a73eab57886ac5605df16ee421e471a971b3"
+  integrity sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==
   optionalDependencies:
-    esbuild-android-64 "0.14.34"
-    esbuild-android-arm64 "0.14.34"
-    esbuild-darwin-64 "0.14.34"
-    esbuild-darwin-arm64 "0.14.34"
-    esbuild-freebsd-64 "0.14.34"
-    esbuild-freebsd-arm64 "0.14.34"
-    esbuild-linux-32 "0.14.34"
-    esbuild-linux-64 "0.14.34"
-    esbuild-linux-arm "0.14.34"
-    esbuild-linux-arm64 "0.14.34"
-    esbuild-linux-mips64le "0.14.34"
-    esbuild-linux-ppc64le "0.14.34"
-    esbuild-linux-riscv64 "0.14.34"
-    esbuild-linux-s390x "0.14.34"
-    esbuild-netbsd-64 "0.14.34"
-    esbuild-openbsd-64 "0.14.34"
-    esbuild-sunos-64 "0.14.34"
-    esbuild-windows-32 "0.14.34"
-    esbuild-windows-64 "0.14.34"
-    esbuild-windows-arm64 "0.14.34"
+    esbuild-android-64 "0.14.36"
+    esbuild-android-arm64 "0.14.36"
+    esbuild-darwin-64 "0.14.36"
+    esbuild-darwin-arm64 "0.14.36"
+    esbuild-freebsd-64 "0.14.36"
+    esbuild-freebsd-arm64 "0.14.36"
+    esbuild-linux-32 "0.14.36"
+    esbuild-linux-64 "0.14.36"
+    esbuild-linux-arm "0.14.36"
+    esbuild-linux-arm64 "0.14.36"
+    esbuild-linux-mips64le "0.14.36"
+    esbuild-linux-ppc64le "0.14.36"
+    esbuild-linux-riscv64 "0.14.36"
+    esbuild-linux-s390x "0.14.36"
+    esbuild-netbsd-64 "0.14.36"
+    esbuild-openbsd-64 "0.14.36"
+    esbuild-sunos-64 "0.14.36"
+    esbuild-windows-32 "0.14.36"
+    esbuild-windows-64 "0.14.36"
+    esbuild-windows-arm64 "0.14.36"
 
 escalade@^3.1.1:
   version "3.1.1"

From b7851c577b927b136403981b9e0fef4a4049c6a9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 21 Apr 2022 09:04:47 -0700
Subject: [PATCH 03/14] Bump semver from 7.3.5 to 7.3.7 (#5259)

Bumps [semver](https://github.com/npm/node-semver) from 7.3.5 to 7.3.7.
- [Release notes](https://github.com/npm/node-semver/releases)
- [Changelog](https://github.com/npm/node-semver/blob/main/CHANGELOG.md)
- [Commits](https://github.com/npm/node-semver/compare/v7.3.5...v7.3.7)

---
updated-dependencies:
- dependency-name: semver
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 15 ++++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 6371d26195..eb72608be7 100644
--- a/package.json
+++ b/package.json
@@ -259,7 +259,7 @@
     "request-promise-native": "^1.0.9",
     "rfc6902": "^4.0.2",
     "selfsigned": "^2.0.1",
-    "semver": "^7.3.2",
+    "semver": "^7.3.7",
     "shell-env": "^3.0.1",
     "spdy": "^4.0.2",
     "tar": "^6.1.11",
diff --git a/yarn.lock b/yarn.lock
index 1b68df8ebd..6f3264ae45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11739,10 +11739,10 @@ semver-diff@^3.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@7.x, semver@^7.2.1, semver@^7.3.2:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+semver@7.x, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -11751,13 +11751,6 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.4, semver@^7.3.5:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
-  dependencies:
-    lru-cache "^6.0.0"
-
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"

From 11f3cafac33ec6a1b1bd8f2e24acb37097382da2 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Mon, 25 Apr 2022 14:29:49 +0300
Subject: [PATCH 04/14] Expose Lens Monaco Editor component to extensions-api
 (#5264)

* Expose Lens Monaco Editor component to public, close #5094
---
 integration/__tests__/cluster-pages.tests.ts  |  4 +-
 src/extensions/renderer-api/components.ts     |  5 ++
 .../monaco-editor/monaco-editor.tsx           | 59 +++++++++----------
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts
index 48767c8de2..0027588298 100644
--- a/integration/__tests__/cluster-pages.tests.ts
+++ b/integration/__tests__/cluster-pages.tests.ts
@@ -178,9 +178,7 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
       }
 
       const testPodName = "nginx-create-pod-test";
-      const monacoEditor = await frame.waitForSelector(
-        `.Dock.isOpen [data-test-component="monaco-editor"]`,
-      );
+      const monacoEditor = await frame.waitForSelector(`.Dock.isOpen [data-test-id="monaco-editor"]`);
 
       await monacoEditor.click();
       await monacoEditor.type("apiVersion: v1", { delay: 10 });
diff --git a/src/extensions/renderer-api/components.ts b/src/extensions/renderer-api/components.ts
index 62d97c490c..21733bd85e 100644
--- a/src/extensions/renderer-api/components.ts
+++ b/src/extensions/renderer-api/components.ts
@@ -64,6 +64,11 @@ export * from "../../renderer/components/layout/sub-title";
 export * from "../../renderer/components/input/search-input";
 export * from "../../renderer/components/chart/bar-chart";
 export * from "../../renderer/components/chart/pie-chart";
+export {
+  MonacoEditor,
+  type MonacoEditorProps, type MonacoEditorId,
+  type MonacoTheme, type MonacoCustomTheme,
+} from "../../renderer/components/monaco-editor";
 
 // kube helpers
 export * from "../../renderer/components/kube-detail-params";
diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx
index f50e49f191..6c8f3e01a6 100644
--- a/src/renderer/components/monaco-editor/monaco-editor.tsx
+++ b/src/renderer/components/monaco-editor/monaco-editor.tsx
@@ -9,12 +9,12 @@ import { observer } from "mobx-react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { editor, Uri } from "monaco-editor";
 import type { MonacoTheme } from "./monaco-themes";
-import type { MonacoValidator } from "./monaco-validators";
-import { monacoValidators } from "./monaco-validators";
+import { type MonacoValidator, monacoValidators } from "./monaco-validators";
 import { debounce, merge } from "lodash";
-import { cssNames, disposer } from "../../utils";
+import { autoBind, cssNames, disposer } from "../../utils";
 import { UserStore } from "../../../common/user-store";
 import { ThemeStore } from "../../theme.store";
+import logger from "../../../main/logger";
 
 export type MonacoEditorId = string;
 
@@ -45,32 +45,28 @@ export const defaultEditorProps: Partial<MonacoEditorProps> = {
 
 @observer
 export class MonacoEditor extends React.Component<MonacoEditorProps> {
-  static defaultProps = defaultEditorProps as object;
-  static viewStates = new WeakMap<Uri, editor.ICodeEditorViewState>();
+  static readonly defaultProps = defaultEditorProps as object;
+  static readonly viewStates = new WeakMap<Uri, editor.ICodeEditorViewState>();
 
   static createUri(id: MonacoEditorId): Uri {
     return Uri.file(`/monaco-editor/${id}`);
   }
 
-  public staticId = `editor-id#${Math.round(1e7 * Math.random())}`;
-  public dispose = disposer();
-
-  // TODO: investigate how to replace with "common/logger"
-  //  currently leads for stucking UI forever & infinite loop.
-  //  e.g. happens on tab change/create, maybe some other cases too.
-  logger = console;
+  private staticId = `editor-id#${Math.round(1e7 * Math.random())}`;
+  private dispose = disposer();
 
   @observable.ref containerElem: HTMLElement;
   @observable.ref editor: editor.IStandaloneCodeEditor;
-  @observable dimensions: { width?: number; height?: number } = {};
-  @observable unmounting = false;
+  @observable readonly dimensions: { width?: number; height?: number } = {};
+  @observable private unmounting = false;
 
   constructor(props: MonacoEditorProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
-  @computed get id() {
+  @computed get id(): MonacoEditorId {
     return this.props.id ?? this.staticId;
   }
 
@@ -94,7 +90,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     );
   }
 
-  @computed get logMetadata() {
+  @computed
+  private get logMetadata() {
     return {
       editorId: this.id,
       model: this.model,
@@ -121,8 +118,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     return () => resizeObserver.unobserve(containerElem);
   }
 
-  onModelChange = (model: editor.ITextModel, oldModel?: editor.ITextModel) => {
-    this.logger?.info("[MONACO]: model change", { model, oldModel }, this.logMetadata);
+  protected onModelChange(model: editor.ITextModel, oldModel?: editor.ITextModel) {
+    logger.info("[MONACO]: model change", { model, oldModel }, this.logMetadata);
 
     if (oldModel) {
       this.saveViewState(oldModel);
@@ -134,18 +131,17 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     this.editor.focus(); // keep focus in editor, e.g. when clicking between dock-tabs
     this.props.onModelChange?.(model, oldModel);
     this.validateLazy();
-  };
+  }
 
   /**
    * Save current view-model state in the editor.
    * This will allow restore cursor position, selected text, etc.
-   * @param {editor.ITextModel} model
    */
-  private saveViewState(model: editor.ITextModel) {
+  protected saveViewState(model: editor.ITextModel) {
     MonacoEditor.viewStates.set(model.uri, this.editor.saveViewState());
   }
 
-  private restoreViewState(model: editor.ITextModel) {
+  protected restoreViewState(model: editor.ITextModel) {
     const viewState = MonacoEditor.viewStates.get(model.uri);
 
     if (viewState) {
@@ -156,9 +152,9 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
   componentDidMount() {
     try {
       this.createEditor();
-      this.logger?.info(`[MONACO]: editor did mount`, this.logMetadata);
+      logger.info(`[MONACO]: editor did mount`, this.logMetadata);
     } catch (error) {
-      this.logger?.error(`[MONACO]: mounting failed: ${error}`, this.logMetadata);
+      logger.error(`[MONACO]: mounting failed: ${error}`, this.logMetadata);
     }
   }
 
@@ -168,7 +164,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     this.destroy();
   }
 
-  private createEditor() {
+  protected createEditor() {
     if (!this.containerElem || this.editor || this.unmounting) {
       return;
     }
@@ -184,7 +180,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
       ...this.options,
     });
 
-    this.logger?.info(`[MONACO]: editor created for language=${language}, theme=${theme}`, this.logMetadata);
+    logger.info(`[MONACO]: editor created for language=${language}, theme=${theme}`, this.logMetadata);
     this.validateLazy(); // validate initial value
     this.restoreViewState(this.model); // restore previous state if any
 
@@ -250,7 +246,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     this.editor?.focus();
   }
 
-  validate = action((value = this.getValue()) => {
+  @action
+  validate(value = this.getValue()) {
     const validators: MonacoValidator[] = [
       monacoValidators[this.props.language], // parsing syntax check
     ].filter(Boolean);
@@ -262,19 +259,21 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
         this.props.onError?.(error); // emit error outside
       }
     }
-  });
+  }
 
   // avoid excessive validations during typing
   validateLazy = debounce(this.validate, 250);
 
-  bindRef = (elem: HTMLElement) => this.containerElem = elem;
+  protected bindRef(elem: HTMLElement) {
+    this.containerElem = elem;
+  }
 
   render() {
     const { className, style } = this.props;
 
     return (
       <div
-        data-test-component="monaco-editor"
+        data-test-id="monaco-editor"
         className={cssNames(styles.MonacoEditor, className)}
         style={style}
         ref={this.bindRef}

From 753fa225ed090a357e26058c72a580460c6ad05f Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Mon, 25 Apr 2022 14:10:39 -0700
Subject: [PATCH 05/14] Fix crash in CRD display (#5256)

---
 package.json                                  |   3 +-
 .../crd-resource-details.tsx                  |   8 +-
 .../+custom-resources/crd-resources.tsx       |  26 +--
 .../utils/__tests__/jsonPath.test.tsx         | 162 +++++++++++++++---
 src/renderer/utils/jsonPath.ts                |  87 ++++++++--
 yarn.lock                                     |  46 +++--
 6 files changed, 262 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index eb72608be7..a78199c1b7 100644
--- a/package.json
+++ b/package.json
@@ -199,6 +199,7 @@
     }
   },
   "dependencies": {
+    "@astronautlabs/jsonpath": "^1.1.0",
     "@hapi/call": "^8.0.1",
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.16.3",
@@ -229,7 +230,6 @@
     "joi": "^17.6.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^16.7.0",
-    "jsonpath": "^1.1.1",
     "lodash": "^4.17.15",
     "mac-ca": "^1.0.6",
     "marked": "^4.0.12",
@@ -299,7 +299,6 @@
     "@types/jest": "^26.0.24",
     "@types/js-yaml": "^4.0.5",
     "@types/jsdom": "^16.2.14",
-    "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.181",
     "@types/marked": "^4.0.3",
     "@types/md5-file": "^4.0.2",
diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx
index 6ac5d61ed2..1c43769e2e 100644
--- a/src/renderer/components/+custom-resources/crd-resource-details.tsx
+++ b/src/renderer/components/+custom-resources/crd-resource-details.tsx
@@ -6,7 +6,6 @@
 import "./crd-resource-details.scss";
 
 import React from "react";
-import jsonPath from "jsonpath";
 import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Badge } from "../badge";
@@ -16,10 +15,11 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { Input } from "../input";
 import type { AdditionalPrinterColumnsV1 } from "../../../common/k8s-api/endpoints/crd.api";
 import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
-import { parseJsonPath } from "../../utils/jsonPath";
+import { convertKubectlJsonPathToNodeJsonPath } from "../../utils/jsonPath";
 import type { KubeObjectMetadata, KubeObjectStatus } from "../../../common/k8s-api/kube-object";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
 import logger from "../../../common/logger";
+import { JSONPath } from "@astronautlabs/jsonpath";
 
 export interface CustomResourceDetailsProps extends KubeObjectDetailsProps<KubeObject> {
   crd: CustomResourceDefinition;
@@ -48,9 +48,9 @@ function convertSpecValue(value: any): any {
 @observer
 export class CustomResourceDetails extends React.Component<CustomResourceDetailsProps> {
   renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) {
-    return columns.map(({ name, jsonPath: jp }) => (
+    return columns.map(({ name, jsonPath }) => (
       <DrawerItem key={name} name={name} renderBoolean>
-        {convertSpecValue(jsonPath.value(resource, parseJsonPath(jp.slice(1))))}
+        {convertSpecValue(JSONPath.query(resource, convertKubectlJsonPathToNodeJsonPath(jsonPath)))}
       </DrawerItem>
     ));
   }
diff --git a/src/renderer/components/+custom-resources/crd-resources.tsx b/src/renderer/components/+custom-resources/crd-resources.tsx
index 528f4ea0d9..08d56488bd 100644
--- a/src/renderer/components/+custom-resources/crd-resources.tsx
+++ b/src/renderer/components/+custom-resources/crd-resources.tsx
@@ -6,14 +6,13 @@
 import "./crd-resources.scss";
 
 import React from "react";
-import { value } from "jsonpath";
 import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { IComputedValue } from "mobx";
 import { computed, makeObservable } from "mobx";
 import { crdStore } from "./crd.store";
 import { apiManager } from "../../../common/k8s-api/api-manager";
-import { parseJsonPath } from "../../utils/jsonPath";
+import { safeJSONPathValue } from "../../utils/jsonPath";
 import { TabLayout } from "../layout/tab-layout-2";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import customResourcesRouteParametersInjectable from "./custom-resources-route-parameters.injectable";
@@ -70,7 +69,7 @@ class NonInjectedCrdResources extends React.Component<Dependencies> {
             [columnId.age]: customResource => -customResource.getCreationTimestamp(),
             ...Object.fromEntries(extraColumns.map(({ name, jsonPath }) => [
               name,
-              customResource => value(customResource, parseJsonPath(jsonPath.slice(1))),
+              customResource => safeJSONPathValue(customResource, jsonPath),
             ])),
           }}
           searchFilters={[
@@ -95,22 +94,11 @@ class NonInjectedCrdResources extends React.Component<Dependencies> {
             })),
             { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
-          renderTableContents={crdInstance => [
-            crdInstance.getName(),
-            isNamespaced && crdInstance.getNs(),
-            ...extraColumns.map((column) => {
-              let rawValue = value(crdInstance, parseJsonPath(column.jsonPath.slice(1)));
-
-              if (Array.isArray(rawValue) || typeof rawValue === "object") {
-                rawValue = JSON.stringify(rawValue);
-              }
-
-              return {
-                renderBoolean: true,
-                children: rawValue,
-              };
-            }),
-            <KubeObjectAge key="age" object={crdInstance} />,
+          renderTableContents={customResource => [
+            customResource.getName(),
+            isNamespaced && customResource.getNs(),
+            ...extraColumns.map((column) => safeJSONPathValue(customResource, column.jsonPath)),
+            <KubeObjectAge key="age" object={customResource} />,
           ]}
           failedToLoadMessage={(
             <>
diff --git a/src/renderer/utils/__tests__/jsonPath.test.tsx b/src/renderer/utils/__tests__/jsonPath.test.tsx
index dd8cfa86b8..db5e64d208 100644
--- a/src/renderer/utils/__tests__/jsonPath.test.tsx
+++ b/src/renderer/utils/__tests__/jsonPath.test.tsx
@@ -3,44 +3,166 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { parseJsonPath } from "../jsonPath";
+import { convertKubectlJsonPathToNodeJsonPath, safeJSONPathValue } from "../jsonPath";
 
 describe("parseJsonPath", () => {
-  test("should convert \\. to use indexed notation", () => {
-    const res = parseJsonPath(".metadata.labels.kubesphere\\.io/alias-name");
+  it("should convert \\. to use indexed notation", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels.kubesphere\\.io/alias-name");
 
-    expect(res).toBe(".metadata.labels['kubesphere.io/alias-name']");
+    expect(res).toBe("$.metadata.labels['kubesphere.io/alias-name']");
   });
 
-  test("should convert keys with escaped characters to use indexed notation", () => {
-    const res = parseJsonPath(".metadata.labels.kubesphere\\\"io/alias-name");
+  it("should convert keys with escaped characters to use indexed notation", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels.kubesphere\\\"io/alias-name");
 
-    expect(res).toBe(".metadata.labels['kubesphere\"io/alias-name']");
+    expect(res).toBe("$.metadata.labels['kubesphere\"io/alias-name']");
   });
 
-  test("should convert '-' to use indexed notation", () => {
-    const res = parseJsonPath(".metadata.labels.alias-name");
+  it("should convert '-' to use indexed notation", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels.alias-name");
 
-    expect(res).toBe(".metadata.labels['alias-name']");
+    expect(res).toBe("$.metadata.labels['alias-name']");
   });
 
-  test("should handle scenario when both \\. and indexed notation are present", () => {
-    const rest = parseJsonPath(".metadata.labels\\.serving['some.other.item']");
+  it("should drop leading dot if first group is converted to index notation", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata\\.labels.alias-name");
 
-    expect(rest).toBe(".metadata['labels.serving']['some.other.item']");
+    expect(res).toBe("$['metadata.labels']['alias-name']");
   });
 
+  it("should handle scenario when both \\. and indexed notation are present", () => {
+    const rest = convertKubectlJsonPathToNodeJsonPath(".metadata.labels\\.serving['some.other.item']");
 
-  test("should not touch given jsonPath if no invalid characters present", () => {
-    const res = parseJsonPath(".status.conditions[?(@.type=='Ready')].status");
-
-    expect(res).toBe(".status.conditions[?(@.type=='Ready')].status");
+    expect(rest).toBe("$.metadata['labels.serving']['some.other.item']");
   });
 
-  test("strips '\\' away from the result", () => {
-    const res = parseJsonPath(".metadata.labels['serving\\.knative\\.dev/configuration']");
+  it("should not touch given jsonPath if no invalid characters present", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".status.conditions[?(@.type=='Ready')].status");
 
-    expect(res).toBe(".metadata.labels['serving.knative.dev/configuration']");
+    expect(res).toBe("$.status.conditions[?(@.type=='Ready')].status");
   });
 
+  it("strips '\\' away from the result", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels['serving\\.knative\\.dev/configuration']");
+
+    expect(res).toBe("$.metadata.labels['serving.knative.dev/configuration']");
+  });
+
+  it("converts all [] to [0]", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels[].foo[]");
+
+    expect(res).toBe("$.metadata.labels[0].foo[0]");
+  });
+
+  it("converts ending .. to ..*", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels[]..");
+
+    expect(res).toBe("$.metadata.labels[0]");
+  });
+
+  it("converts ending ...name to ..name", () => {
+    const res = convertKubectlJsonPathToNodeJsonPath(".metadata.labels[]...name");
+
+    expect(res).toBe("$.metadata.labels[0]..name");
+  });
+});
+
+describe("safeJSONPathValue", () => {
+  let oldWarn: typeof console["warn"];
+
+  beforeEach(() => {
+    oldWarn = console.warn;
+    console.warn = jest.fn();
+  });
+
+  afterEach(() => {
+    console.warn = oldWarn;
+  });
+
+  it("should convert boolean values to strings", () => {
+    const res = safeJSONPathValue({ bar: false }, ".bar");
+
+    expect(res).toBe("false");
+  });
+
+  it("should convert number values to strings", () => {
+    const res = safeJSONPathValue({ bar: 0 }, ".bar");
+
+    expect(res).toBe("0");
+  });
+
+  it("should join sliced entries with commas only", () => {
+    const res = safeJSONPathValue({
+      bar: [
+        {
+          foo: 1,
+        },
+        {
+          foo: "hello",
+        },
+      ],
+    }, ".bar[].foo");
+
+    expect(res).toBe("1");
+  });
+
+  it("should join an array of values using JSON.stringify", () => {
+    const res = safeJSONPathValue({
+      bar: [
+        "world",
+        "hello",
+      ],
+    }, ".bar");
+
+    expect(res).toBe(`["world","hello"]`);
+  });
+
+  it("should stringify an object value", () => {
+    const res = safeJSONPathValue({
+      foo: { bar: "bat" },
+    }, ".foo");
+
+    expect(res).toBe(`{"bar":"bat"}`);
+  });
+
+  it("should use convertKubectlJsonPathToNodeJsonPath", () => {
+    const res = safeJSONPathValue({
+      foo: { "hello.world": "bat" },
+    }, ".foo.hello\\.world");
+
+    expect(res).toBe("bat");
+  });
+
+  it("should not throw when given '.spec.metrics[*].external.highWatermark..'", () => {
+    const obj = {
+      spec: {
+        metrics: [
+          {
+            external: {
+              metricName: "cpu",
+              highWatermark: "100",
+            },
+          },
+          {
+            external: {
+              metricName: "memory",
+              highWatermark: "100",
+            },
+          },
+        ],
+      },
+    };
+
+    const res = safeJSONPathValue(obj, ".spec.metrics[*].external.highWatermark..");
+
+    expect(res).toBe("100, 100");
+  });
+
+  it("should not throw if path is invalid jsonpath", () => {
+    const res = safeJSONPathValue({
+      foo: { "hello.world": "bat" },
+    }, "asd[");
+
+    expect(res).toBe("<unknown>");
+  });
 });
diff --git a/src/renderer/utils/jsonPath.ts b/src/renderer/utils/jsonPath.ts
index 6bbf0c7a24..3aedbd0919 100644
--- a/src/renderer/utils/jsonPath.ts
+++ b/src/renderer/utils/jsonPath.ts
@@ -3,28 +3,63 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-// Helper to convert strings used for jsonPath where \. or - is present to use indexed notation,
-// for example: .metadata.labels.kubesphere\.io/alias-name -> .metadata.labels['kubesphere\.io/alias-name']
+import { JSONPath } from "@astronautlabs/jsonpath";
 
-export function parseJsonPath(jsonPath: string) {
-  let pathExpression = jsonPath;
+const slashDashSearch = /[\\-]/g;
+const pathByBareDots = /(?<=\w)\./;
+const textBeforeFirstSquare = /^.*(?=\[)/g;
+const backSlash = /\\/g;
+const kubectlOptionPrefix = /^\$?\.?(?<pathExpression>.*)/;
+const sliceVersion = /\[]/g;
+const tripleDotName = /\.\.\.(?<trailing>.)/g;
+const trailingDotDot = /\.\.$/;
 
-  if (jsonPath.match(/[\\-]/g)) { // search for '\' and '-'
-    const [first, ...rest] = jsonPath.split(/(?<=\w)\./); // split jsonPath by '.' (\. cases are ignored)
+/**
+ * The GO package that kubectl and kubernetes uses for its JSONpath implementation has some
+ * shorthand conveniences that are not part of the official spec. This function tries to convert
+ * those shorthands to the official spec.
+ *
+ * Known shorthands:
+ * - Leading `$` is optional (but implied)
+ * - The string `\.` is used to denote the "value of '.'" and not "next key"
+ * - The string `-` can be used while not in quotes
+ * - `[]` as shorthand for `[0]`
+ * - Remove `..` at the end of a path, we will just format it slightly differently
+ * - Allow `...foo` as well as `..foo`
+ */
+export function convertKubectlJsonPathToNodeJsonPath(jsonPath: string) {
+  const startMatch = jsonPath.match(kubectlOptionPrefix);
+  let start = "$";
+
+  if (!startMatch) {
+    return start;
+  }
+
+  let { pathExpression } = startMatch.groups;
+
+  if (pathExpression.match(slashDashSearch)) {
+    const [first, ...rest] = pathExpression.split(pathByBareDots);
 
     pathExpression = `${convertToIndexNotation(first, true)}${rest.map(value => convertToIndexNotation(value)).join("")}`;
   }
 
+  pathExpression = pathExpression.replace(trailingDotDot, "");
+  pathExpression = pathExpression.replace(tripleDotName, "..$<trailing>");
+
+  if (!pathExpression.startsWith("[")) {
+    start += ".";
+  }
+
   // strip '\' characters from the result
-  return pathExpression.replace(/\\/g, "");
+  return `${start}${pathExpression.replace(backSlash, "").replace(sliceVersion, "[0]")}`;
 }
 
 function convertToIndexNotation(key: string, firstItem = false) {
-  if (key.match(/[\\-]/g)) { // check if found '\' and '-' in key
+  if (key.match(slashDashSearch)) {
     if (key.includes("[")) { // handle cases where key contains [...]
-      const keyToConvert = key.match(/^.*(?=\[)/g); // get the text from the key before '['
+      const keyToConvert = key.match(textBeforeFirstSquare); // get the text from the key before '['
 
-      if (keyToConvert && keyToConvert[0].match(/[\\-]/g)) { // check if that part contains illegal characters
+      if (keyToConvert && keyToConvert[0].match(slashDashSearch)) { // check if that part contains illegal characters
         return key.replace(keyToConvert[0], `['${keyToConvert[0]}']`); // surround key with '[' and ']'
       } else {
         return `.${key}`; // otherwise return as is with leading '.'
@@ -38,3 +73,35 @@ function convertToIndexNotation(key: string, firstItem = false) {
     return `${prefix}${key}`;
   }
 }
+
+function formatJSONValue(value: unknown) {
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+
+  return String(value);
+}
+
+/**
+ * This function is a safer version of `JSONPath.value(obj, path)` with untrusted jsonpath strings
+ *
+ * This function will also stringify the value retreived from the object
+ */
+export function safeJSONPathValue(obj: object, path: string): string {
+  try {
+    const parsedPath = JSONPath.parse(convertKubectlJsonPathToNodeJsonPath(path));
+    const isSlice = parsedPath.some((exp: any) => exp.expression.type === "slice" || "wildcard");
+    const value = JSONPath.query(obj, JSONPath.stringify(parsedPath), isSlice ? Infinity : 1);
+
+    if (isSlice) {
+      return value.map(formatJSONValue).join(", ");
+    }
+
+    return formatJSONValue(value[0]);
+  } catch (error) {
+    // something failed
+    console.warn("[JSON-PATH]: failed to parse jsonpath", error);
+
+    return "<unknown>";
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 6f3264ae45..612dc8281b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,17 @@
   resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.1.1.tgz#9274ec7460652f9c632c59addf24efb1684ef876"
   integrity sha512-sAP4LldeWNz0lNzmTird3uWfFDWWTeg6V/MsmyyLR9X1idwKBWIgt/ZvinqQldJm3LecKEs1emkbquO6PCiLVQ==
 
+"@astronautlabs/jsonpath@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@astronautlabs/jsonpath/-/jsonpath-1.1.0.tgz#9b4b04603be2e858d0763619ab3f9d1050b52ef3"
+  integrity sha512-I4sckUQNYEeF4w6AkujiRblVzC0jo3ja+bxKHB1M2aFiaBjevSGlBdgZ80PgCX5sj65/AhKSFN9+cT908avBlQ==
+  dependencies:
+    "@types/esprima" "^4.0.2"
+    "@types/mkdirp" "^1.0.0"
+    esprima "1.2.2"
+    static-eval "2.0.2"
+    underscore "1.7.0"
+
 "@async-fn/jest@1.5.3":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@async-fn/jest/-/jest-1.5.3.tgz#42be6c0e8ba5ccd737e006ca600e7e319fe2a591"
@@ -1449,6 +1460,13 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
+"@types/esprima@^4.0.2":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/esprima/-/esprima-4.0.3.tgz#e9068297cc3dd75231fa5cdaa6d75c50d5fb632f"
+  integrity sha512-jo14dIWVVtF0iMsKkYek6++4cWJjwpvog+rchLulwgFJGTXqIeTdCOvY0B3yMLTaIwMcKCdJ6mQbSR6wYHy98A==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/estree@*", "@types/estree@^0.0.51":
   version "0.0.51"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
@@ -1611,11 +1629,6 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/jsonpath@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@types/jsonpath/-/jsonpath-0.2.0.tgz#13c62db22a34d9c411364fac79fd374d63445aa1"
-  integrity sha512-v7qlPA0VpKUlEdhghbDqRoKMxFB3h3Ch688TApBJ6v+XLDdvWCGLJIYiPKGZnS6MAOie+IorCfNYVHOPIHSWwQ==
-
 "@types/keyv@*":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.1.tgz#e45a45324fca9dab716ab1230ee249c9fb52cfa7"
@@ -1662,6 +1675,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/mkdirp@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-1.0.2.tgz#8d0bad7aa793abe551860be1f7ae7f3198c16666"
+  integrity sha512-o0K1tSO0Dx5X6xlU5F1D6625FawhC3dU3iqr25lluNv/+/QIVH8RLNEiVokgIZo+mz+87w/3Mkg/VvQS+J51fQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/mock-fs@^4.13.1":
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/@types/mock-fs/-/mock-fs-4.13.1.tgz#9201554ceb23671badbfa8ac3f1fa9e0706305be"
@@ -8219,15 +8239,6 @@ jsonpath-plus@^0.19.0:
   resolved "https://registry.yarnpkg.com/jsonpath-plus/-/jsonpath-plus-0.19.0.tgz#b901e57607055933dc9a8bef0cc25160ee9dd64c"
   integrity sha512-GSVwsrzW9LsA5lzsqe4CkuZ9wp+kxBb2GwNniaWzI2YFn5Ig42rSW8ZxVpWXaAfakXNrx5pgY5AbQq7kzX29kg==
 
-jsonpath@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901"
-  integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==
-  dependencies:
-    esprima "1.2.2"
-    static-eval "2.0.2"
-    underscore "1.12.1"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -13202,7 +13213,12 @@ undefsafe@^2.0.5:
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
   integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
 
-underscore@1.12.1, underscore@^1.9.1:
+underscore@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+  integrity sha1-a7rwh3UA02vjTsqlhODbn+8DUgk=
+
+underscore@^1.9.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
   integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==

From 3a6a494c4fa1ec67306a6ba532cb04e76fa7324b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Apr 2022 10:56:13 -0400
Subject: [PATCH 06/14] Bump react-refresh from 0.11.0 to 0.12.0 (#5221)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a78199c1b7..91a05f8501 100644
--- a/package.json
+++ b/package.json
@@ -379,7 +379,7 @@
     "postcss-loader": "^6.2.1",
     "randomcolor": "^0.6.2",
     "react-beautiful-dnd": "^13.1.0",
-    "react-refresh": "^0.11.0",
+    "react-refresh": "^0.12.0",
     "react-refresh-typescript": "^2.0.4",
     "react-router-dom": "^5.3.1",
     "react-select": "3.2.0",
diff --git a/yarn.lock b/yarn.lock
index 612dc8281b..6a22b6e2d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11027,10 +11027,10 @@ react-refresh-typescript@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-refresh-typescript/-/react-refresh-typescript-2.0.4.tgz#f20acdb3a538fc79da10c64fdd5560bea01309f1"
   integrity sha512-ySsBExEFik5Jjf7NoXtFbzUk2rYWM4gF5gg+wRTNmp9p7B2uMpAAa339FHWqmB8EAr0e6mzzskAXxc0Jd04fBw==
 
-react-refresh@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
-  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+react-refresh@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.12.0.tgz#28ac0a2c30ef2bb3433d5fd0621e69a6d774c3a4"
+  integrity sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==
 
 react-router-dom@^5.3.1:
   version "5.3.1"

From b4866a035e11f6e1718581ca7e6a9798d245568f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Apr 2022 10:57:11 -0400
Subject: [PATCH 07/14] Bump esbuild from 0.14.36 to 0.14.38 (#5267)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |   2 +-
 yarn.lock    | 208 +++++++++++++++++++++++++--------------------------
 2 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/package.json b/package.json
index 91a05f8501..e9c21a19cf 100644
--- a/package.json
+++ b/package.json
@@ -348,7 +348,7 @@
     "electron": "^14.2.9",
     "electron-builder": "^23.0.3",
     "electron-notarize": "^0.3.0",
-    "esbuild": "^0.14.36",
+    "esbuild": "^0.14.38",
     "esbuild-loader": "^2.18.0",
     "eslint": "^8.11.0",
     "eslint-plugin-header": "^3.1.1",
diff --git a/yarn.lock b/yarn.lock
index 6a22b6e2d5..6ea37e7c20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5157,75 +5157,75 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-esbuild-android-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.36.tgz#fc5f95ce78c8c3d790fa16bc71bd904f2bb42aa1"
-  integrity sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==
+esbuild-android-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz#5b94a1306df31d55055f64a62ff6b763a47b7f64"
+  integrity sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw==
 
-esbuild-android-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.36.tgz#44356fbb9f8de82a5cdf11849e011dfb3ad0a8a8"
-  integrity sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==
+esbuild-android-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.38.tgz#78acc80773d16007de5219ccce544c036abd50b8"
+  integrity sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA==
 
-esbuild-darwin-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.36.tgz#3d9324b21489c70141665c2e740d6e84f16f725d"
-  integrity sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==
+esbuild-darwin-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.38.tgz#e02b1291f629ebdc2aa46fabfacc9aa28ff6aa46"
+  integrity sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA==
 
-esbuild-darwin-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.36.tgz#2a8040c2e465131e5281034f3c72405e643cb7b2"
-  integrity sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==
+esbuild-darwin-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.38.tgz#01eb6650ec010b18c990e443a6abcca1d71290a9"
+  integrity sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==
 
-esbuild-freebsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.36.tgz#d82c387b4d01fe9e8631f97d41eb54f2dbeb68a3"
-  integrity sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==
+esbuild-freebsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.38.tgz#790b8786729d4aac7be17648f9ea8e0e16475b5e"
+  integrity sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig==
 
-esbuild-freebsd-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.36.tgz#e8ce2e6c697da6c7ecd0cc0ac821d47c5ab68529"
-  integrity sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==
+esbuild-freebsd-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.38.tgz#b66340ab28c09c1098e6d9d8ff656db47d7211e6"
+  integrity sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ==
 
-esbuild-linux-32@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.36.tgz#a4a261e2af91986ea62451f2db712a556cb38a15"
-  integrity sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==
+esbuild-linux-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.38.tgz#7927f950986fd39f0ff319e92839455912b67f70"
+  integrity sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g==
 
-esbuild-linux-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.36.tgz#4a9500f9197e2c8fcb884a511d2c9d4c2debde72"
-  integrity sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==
+esbuild-linux-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.38.tgz#4893d07b229d9cfe34a2b3ce586399e73c3ac519"
+  integrity sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q==
 
-esbuild-linux-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.36.tgz#c91c21e25b315464bd7da867365dd1dae14ca176"
-  integrity sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==
+esbuild-linux-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.38.tgz#8442402e37d0b8ae946ac616784d9c1a2041056a"
+  integrity sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA==
 
-esbuild-linux-arm@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.36.tgz#90e23bca2e6e549affbbe994f80ba3bb6c4d934a"
-  integrity sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==
+esbuild-linux-arm@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.38.tgz#d5dbf32d38b7f79be0ec6b5fb2f9251fd9066986"
+  integrity sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA==
 
-esbuild-linux-mips64le@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.36.tgz#40e11afb08353ff24709fc89e4db0f866bc131d2"
-  integrity sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==
+esbuild-linux-mips64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.38.tgz#95081e42f698bbe35d8ccee0e3a237594b337eb5"
+  integrity sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ==
 
-esbuild-linux-ppc64le@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.36.tgz#9e8a588c513d06cc3859f9dcc52e5fdfce8a1a5e"
-  integrity sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==
+esbuild-linux-ppc64le@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.38.tgz#dceb0a1b186f5df679618882a7990bd422089b47"
+  integrity sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q==
 
-esbuild-linux-riscv64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.36.tgz#e578c09b23b3b97652e60e3692bfda628b541f06"
-  integrity sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==
+esbuild-linux-riscv64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.38.tgz#61fb8edb75f475f9208c4a93ab2bfab63821afd2"
+  integrity sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ==
 
-esbuild-linux-s390x@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.36.tgz#3c9dab40d0d69932ffded0fd7317bb403626c9bc"
-  integrity sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==
+esbuild-linux-s390x@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.38.tgz#34c7126a4937406bf6a5e69100185fd702d12fe0"
+  integrity sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ==
 
 esbuild-loader@^2.18.0:
   version "2.18.0"
@@ -5239,61 +5239,61 @@ esbuild-loader@^2.18.0:
     tapable "^2.2.0"
     webpack-sources "^2.2.0"
 
-esbuild-netbsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.36.tgz#e27847f6d506218291619b8c1e121ecd97628494"
-  integrity sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==
+esbuild-netbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.38.tgz#322ea9937d9e529183ee281c7996b93eb38a5d95"
+  integrity sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q==
 
-esbuild-openbsd-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.36.tgz#c94c04c557fae516872a586eae67423da6d2fabb"
-  integrity sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==
+esbuild-openbsd-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.38.tgz#1ca29bb7a2bf09592dcc26afdb45108f08a2cdbd"
+  integrity sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ==
 
-esbuild-sunos-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.36.tgz#9b79febc0df65a30f1c9bd63047d1675511bf99d"
-  integrity sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==
+esbuild-sunos-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.38.tgz#c9446f7d8ebf45093e7bb0e7045506a88540019b"
+  integrity sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA==
 
-esbuild-windows-32@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.36.tgz#910d11936c8d2122ffdd3275e5b28d8a4e1240ec"
-  integrity sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==
+esbuild-windows-32@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.38.tgz#f8e9b4602fd0ccbd48e5c8d117ec0ba4040f2ad1"
+  integrity sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw==
 
-esbuild-windows-64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.36.tgz#21b4ce8b42a4efc63f4b58ec617f1302448aad26"
-  integrity sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==
+esbuild-windows-64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.38.tgz#280f58e69f78535f470905ce3e43db1746518107"
+  integrity sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw==
 
-esbuild-windows-arm64@0.14.36:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.36.tgz#ba21546fecb7297667d0052d00150de22c044b24"
-  integrity sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==
+esbuild-windows-arm64@0.14.38:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.38.tgz#d97e9ac0f95a4c236d9173fa9f86c983d6a53f54"
+  integrity sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw==
 
-esbuild@^0.14.36, esbuild@^0.14.6:
-  version "0.14.36"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.36.tgz#0023a73eab57886ac5605df16ee421e471a971b3"
-  integrity sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==
+esbuild@^0.14.38, esbuild@^0.14.6:
+  version "0.14.38"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.38.tgz#99526b778cd9f35532955e26e1709a16cca2fb30"
+  integrity sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA==
   optionalDependencies:
-    esbuild-android-64 "0.14.36"
-    esbuild-android-arm64 "0.14.36"
-    esbuild-darwin-64 "0.14.36"
-    esbuild-darwin-arm64 "0.14.36"
-    esbuild-freebsd-64 "0.14.36"
-    esbuild-freebsd-arm64 "0.14.36"
-    esbuild-linux-32 "0.14.36"
-    esbuild-linux-64 "0.14.36"
-    esbuild-linux-arm "0.14.36"
-    esbuild-linux-arm64 "0.14.36"
-    esbuild-linux-mips64le "0.14.36"
-    esbuild-linux-ppc64le "0.14.36"
-    esbuild-linux-riscv64 "0.14.36"
-    esbuild-linux-s390x "0.14.36"
-    esbuild-netbsd-64 "0.14.36"
-    esbuild-openbsd-64 "0.14.36"
-    esbuild-sunos-64 "0.14.36"
-    esbuild-windows-32 "0.14.36"
-    esbuild-windows-64 "0.14.36"
-    esbuild-windows-arm64 "0.14.36"
+    esbuild-android-64 "0.14.38"
+    esbuild-android-arm64 "0.14.38"
+    esbuild-darwin-64 "0.14.38"
+    esbuild-darwin-arm64 "0.14.38"
+    esbuild-freebsd-64 "0.14.38"
+    esbuild-freebsd-arm64 "0.14.38"
+    esbuild-linux-32 "0.14.38"
+    esbuild-linux-64 "0.14.38"
+    esbuild-linux-arm "0.14.38"
+    esbuild-linux-arm64 "0.14.38"
+    esbuild-linux-mips64le "0.14.38"
+    esbuild-linux-ppc64le "0.14.38"
+    esbuild-linux-riscv64 "0.14.38"
+    esbuild-linux-s390x "0.14.38"
+    esbuild-netbsd-64 "0.14.38"
+    esbuild-openbsd-64 "0.14.38"
+    esbuild-sunos-64 "0.14.38"
+    esbuild-windows-32 "0.14.38"
+    esbuild-windows-64 "0.14.38"
+    esbuild-windows-arm64 "0.14.38"
 
 escalade@^3.1.1:
   version "3.1.1"

From a09ceacfd27b9fb986b989fd45e5a509125e5a0f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Apr 2022 10:57:22 -0400
Subject: [PATCH 08/14] Bump @types/react-router-dom from 5.3.2 to 5.3.3
 (#5266)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index e9c21a19cf..cc11a7ef1c 100644
--- a/package.json
+++ b/package.json
@@ -312,7 +312,7 @@
     "@types/react": "^17.0.43",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.14",
-    "@types/react-router-dom": "^5.3.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "3.1.2",
     "@types/react-table": "^7.7.9",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
diff --git a/yarn.lock b/yarn.lock
index 6ea37e7c20..916f262c6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,10 +1525,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@*", "@types/history@^4.7.8":
-  version "4.7.8"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
-  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+"@types/history@*", "@types/history@^4.7.11", "@types/history@^4.7.8":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
 "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
@@ -1803,12 +1803,12 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.3.2":
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.2.tgz#ebd8e145cf056db5c66eb1dac63c72f52e8542ee"
-  integrity sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router" "*"
 

From e4b1fa2f40bff414f8c19a12d080cea0a7a4388a Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 26 Apr 2022 20:18:18 -0700
Subject: [PATCH 09/14] Fix make dev on master (#5282)

- Add CI action to validate that future bump PRs don't break dev mode

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .github/workflows/test.yml | 4 ++++
 Makefile                   | 3 +++
 package.json               | 2 +-
 yarn.lock                  | 8 ++++----
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 1bbcb3366e..eb2278097d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -67,6 +67,10 @@ jobs:
       - run: make test-extensions
         name: Run In-tree Extension tests
 
+      - run: make ci-validate-dev
+        if: ${{ contains(github.event.pull_request.labels.*.name, 'dependencies') }}
+        name: Validate dev mode will work
+
       - name: Install integration test dependencies
         id: minikube
         uses: medyagh/setup-minikube@5a9a7104d7322fa40424de8855c84685e89cefd7
diff --git a/Makefile b/Makefile
index 1435ab5004..6db96fbc2b 100644
--- a/Makefile
+++ b/Makefile
@@ -28,6 +28,9 @@ compile-dev: node_modules
 	yarn compile:main --cache
 	yarn compile:renderer --cache
 
+.PHONY: validate-dev
+ci-validate-dev: binaries/client build-extensions compile-dev
+
 .PHONY: dev
 dev: binaries/client build-extensions
 	rm -rf static/build/
diff --git a/package.json b/package.json
index cc11a7ef1c..01583e195f 100644
--- a/package.json
+++ b/package.json
@@ -278,7 +278,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@sentry/types": "^6.19.3",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
diff --git a/yarn.lock b/yarn.lock
index 916f262c6e..972b23276a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1003,10 +1003,10 @@
   resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
   integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==
 
-"@pmmmwh/react-refresh-webpack-plugin@^0.5.4":
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.4.tgz#df0d0d855fc527db48aac93c218a0bf4ada41f99"
-  integrity sha512-zZbZeHQDnoTlt2AF+diQT0wsSXpvWiaIOZwBRdltNFhG1+I3ozyaw7U/nBiUwyJ0D+zwdXp0E3bWOl38Ag2BMw==
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz#e77aac783bd079f548daa0a7f080ab5b5a9741ca"
+  integrity sha512-RbG7h6TuP6nFFYKJwbcToA1rjC1FyPg25NR2noAZ0vKI+la01KTSRPkuVPE+U88jXv7javx2JHglUcL1MHcshQ==
   dependencies:
     ansi-html-community "^0.0.8"
     common-path-prefix "^3.0.0"

From 22d2133ac8b44668f71ab2237816b949b40f37ac Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 27 Apr 2022 12:31:07 +0300
Subject: [PATCH 10/14] Upgrade ReactSelect to latest version (#5277)

* - maintenance: upgrade react-select to latest version (5+)
- fix: props.styles was ignored and didn't passed to original react-select component from abstraction wrapper
---
 package.json                                  |   2 +-
 .../closing-preferences.test.tsx.snap         | 472 ++++++++++--------
 ...on-to-application-preferences.test.ts.snap | 236 +++++----
 ...igation-to-editor-preferences.test.ts.snap | 354 +++++++------
 ...tension-specific-preferences.test.tsx.snap | 472 ++++++++++--------
 ...ion-to-kubernetes-preferences.test.ts.snap | 357 +++++++------
 ...vigation-to-proxy-preferences.test.ts.snap | 236 +++++----
 ...ion-to-telemetry-preferences.test.tsx.snap | 472 ++++++++++--------
 ...ation-to-terminal-preferences.test.ts.snap | 295 ++++++-----
 ...gation-using-application-menu.test.ts.snap | 236 +++++----
 .../+namespaces/namespace-select-filter.tsx   |   5 +-
 .../+preferences/kubectl-binaries.tsx         |   2 +-
 src/renderer/components/select/select.tsx     |  43 +-
 yarn.lock                                     | 224 +++++----
 14 files changed, 1959 insertions(+), 1447 deletions(-)

diff --git a/package.json b/package.json
index 01583e195f..6be5a730ab 100644
--- a/package.json
+++ b/package.json
@@ -382,7 +382,7 @@
     "react-refresh": "^0.12.0",
     "react-refresh-typescript": "^2.0.4",
     "react-router-dom": "^5.3.1",
-    "react-select": "3.2.0",
+    "react-select": "^5.3.0",
     "react-select-event": "^5.3.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
diff --git a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
index ec4585cb42..d0f2586641 100644
--- a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -120,42 +120,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-26-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-26-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-26-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -170,7 +179,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -196,42 +205,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-27-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-27-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-27-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -246,7 +264,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -327,42 +345,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-28-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-28-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-28-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -377,7 +404,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -403,42 +430,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-29-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-29-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-29-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -453,7 +489,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -787,42 +823,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -837,7 +882,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -863,42 +908,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -913,7 +967,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -994,42 +1048,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1044,7 +1107,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1070,42 +1133,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1120,7 +1192,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 676844b978..c1a12d60ba 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -310,42 +310,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -360,7 +369,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -386,42 +395,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -436,7 +454,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -517,42 +535,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -567,7 +594,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -593,42 +620,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -643,7 +679,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index 731d58c794..6d5284f7bb 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -628,42 +664,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   Position
                 </div>
                 <div
-                  class="Select theme-lens css-2b097c-container"
+                  class="Select theme-lens css-b62m3t-container"
                 >
+                  <span
+                    class="css-1f43avz-a11yText-A11yText"
+                    id="react-select-14-live-region"
+                  />
+                  <span
+                    aria-atomic="false"
+                    aria-live="polite"
+                    aria-relevant="additions text"
+                    class="css-1f43avz-a11yText-A11yText"
+                  />
                   <div
-                    class="Select__control css-yk16xz-control"
+                    class="Select__control css-1s2u09g-control"
                   >
                     <div
-                      class="Select__value-container css-g1d714-ValueContainer"
+                      class="Select__value-container css-319lph-ValueContainer"
                     >
                       <div
-                        class="Select__placeholder css-1wa3eu0-placeholder"
+                        class="Select__placeholder css-14el2xx-placeholder"
+                        id="react-select-14-placeholder"
                       >
                         Select...
                       </div>
                       <div
-                        class="css-b8ldur-Input"
+                        class="Select__input-container css-6j8wv5-Input"
+                        data-value=""
                       >
-                        <div
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby="react-select-14-placeholder"
+                          aria-expanded="false"
+                          aria-haspopup="true"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
                           class="Select__input"
-                          style="display: inline-block;"
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            id="minimap-input"
-                            spellcheck="false"
-                            style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          id="minimap-input"
+                          role="combobox"
+                          spellcheck="false"
+                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
                       </div>
                     </div>
                     <div
@@ -678,7 +723,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                       >
                         <svg
                           aria-hidden="true"
-                          class="css-6q0nyr-Svg"
+                          class="css-tj5bde-Svg"
                           focusable="false"
                           height="20"
                           viewBox="0 0 20 20"
@@ -703,42 +748,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="editor-line-numbers-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="editor-line-numbers-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -753,7 +807,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index db0b8f3207..dbf45087b1 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -617,42 +653,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -667,7 +712,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -693,42 +738,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -743,7 +797,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -824,42 +878,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-16-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-16-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-16-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -874,7 +937,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -900,42 +963,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-17-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-17-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-17-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -950,7 +1022,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index 374f371edb..7f8ad70c1a 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -624,49 +660,59 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                  
               </div>
               <div
-                class="Select theme-lens css-2b097c-container"
+                class="Select theme-lens Select--is-disabled css-3iigni-container"
               >
+                <span
+                  class="css-1f43avz-a11yText-A11yText"
+                  id="react-select-14-live-region"
+                />
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
                 <div
-                  class="Select__control css-yk16xz-control"
+                  class="Select__control Select__control--is-disabled css-1insrsq-control"
                 >
                   <div
-                    class="Select__value-container css-g1d714-ValueContainer"
+                    class="Select__value-container css-319lph-ValueContainer"
                   >
                     <div
-                      class="Select__placeholder css-1wa3eu0-placeholder"
+                      class="Select__placeholder css-14el2xx-placeholder"
+                      id="react-select-14-placeholder"
                     >
                       Download mirror for kubectl
                     </div>
                     <div
-                      class="css-b8ldur-Input"
+                      class="Select__input-container css-jzldcf-Input"
+                      data-value=""
                     >
-                      <div
+                      <input
+                        aria-autocomplete="list"
+                        aria-describedby="react-select-14-placeholder"
+                        aria-expanded="false"
+                        aria-haspopup="true"
+                        autocapitalize="none"
+                        autocomplete="off"
+                        autocorrect="off"
                         class="Select__input"
-                        style="display: inline-block;"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          id="download-mirror-input"
-                          spellcheck="false"
-                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                        />
-                      </div>
+                        disabled=""
+                        id="download-mirror-input"
+                        role="combobox"
+                        spellcheck="false"
+                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                        tabindex="0"
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
                   <div
                     class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                   >
                     <span
-                      class="Select__indicator-separator css-1okebmr-indicatorSeparator"
+                      class="Select__indicator-separator css-109onse-indicatorSeparator"
                     />
                     <div
                       aria-hidden="true"
@@ -674,7 +720,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     >
                       <svg
                         aria-hidden="true"
-                        class="css-6q0nyr-Svg"
+                        class="css-tj5bde-Svg"
                         focusable="false"
                         height="20"
                         viewBox="0 0 20 20"
@@ -795,42 +841,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="flex gaps"
               >
                 <div
-                  class="Select theme-lens box grow css-2b097c-container"
+                  class="Select theme-lens box grow css-b62m3t-container"
                 >
+                  <span
+                    class="css-1f43avz-a11yText-A11yText"
+                    id="react-select-15-live-region"
+                  />
+                  <span
+                    aria-atomic="false"
+                    aria-live="polite"
+                    aria-relevant="additions text"
+                    class="css-1f43avz-a11yText-A11yText"
+                  />
                   <div
-                    class="Select__control css-yk16xz-control"
+                    class="Select__control css-1s2u09g-control"
                   >
                     <div
-                      class="Select__value-container css-g1d714-ValueContainer"
+                      class="Select__value-container css-319lph-ValueContainer"
                     >
                       <div
-                        class="Select__placeholder css-1wa3eu0-placeholder"
+                        class="Select__placeholder css-14el2xx-placeholder"
+                        id="react-select-15-placeholder"
                       >
                         Repositories
                       </div>
                       <div
-                        class="css-b8ldur-Input"
+                        class="Select__input-container css-6j8wv5-Input"
+                        data-value=""
                       >
-                        <div
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby="react-select-15-placeholder"
+                          aria-expanded="false"
+                          aria-haspopup="true"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
                           class="Select__input"
-                          style="display: inline-block;"
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            id="HelmRepoSelect"
-                            spellcheck="false"
-                            style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          id="HelmRepoSelect"
+                          role="combobox"
+                          spellcheck="false"
+                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
                       </div>
                     </div>
                     <div
@@ -845,7 +900,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                       >
                         <svg
                           aria-hidden="true"
-                          class="css-6q0nyr-Svg"
+                          class="css-tj5bde-Svg"
                           focusable="false"
                           height="20"
                           viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index 5f4ad2bebd..ec521a3ad5 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index 17195dc495..278461e4b9 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -296,42 +296,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -346,7 +355,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -372,42 +381,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -422,7 +440,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -503,42 +521,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -553,7 +580,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -579,42 +606,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -629,7 +665,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -805,42 +841,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -855,7 +900,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -881,42 +926,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -931,7 +985,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1012,42 +1066,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-16-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-16-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-16-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1062,7 +1125,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1088,42 +1151,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-17-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-17-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-17-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1138,7 +1210,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 21aca325fe..76064feb67 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -649,42 +685,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="terminal-theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="terminal-theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -699,7 +744,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index fa7004eb24..e44a035cd0 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -110,42 +110,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -160,7 +169,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -186,42 +195,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -236,7 +254,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -317,42 +335,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -367,7 +394,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -393,42 +420,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -443,7 +479,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index e08b5f0620..f1db8122d9 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@@ -7,8 +7,7 @@ import "./namespace-select-filter.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import type { OptionTypeBase, PlaceholderProps } from "react-select";
-import { components } from "react-select";
+import { components, type PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { NamespaceSelect } from "./namespace-select";
@@ -78,7 +77,7 @@ export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(
   }),
 });
 
-export interface CustomPlaceholderProps extends PlaceholderProps<OptionTypeBase, boolean> {}
+export interface CustomPlaceholderProps extends PlaceholderProps {}
 
 interface PlaceholderDependencies {
   namespaceStore: NamespaceStore;
diff --git a/src/renderer/components/+preferences/kubectl-binaries.tsx b/src/renderer/components/+preferences/kubectl-binaries.tsx
index 138a6f805d..99e112e1eb 100644
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/src/renderer/components/+preferences/kubectl-binaries.tsx
@@ -64,7 +64,7 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = observer(
             options={downloadMirrorOptions}
             value={userStore.downloadMirror}
             onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
-            disabled={!userStore.downloadKubectlBinaries}
+            isDisabled={!userStore.downloadKubectlBinaries}
             isOptionDisabled={({ platforms }) =>
               !platforms.has(process.platform)
             }
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 69d92ec8ff..46c99f34cc 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -7,22 +7,25 @@
 // API docs: https://react-select.com/
 import "./select.scss";
 
-import type { ReactNode } from "react";
 import React from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { components } from "react-select";
-import ReactSelectCreatable from "react-select/creatable";
-import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import type { CreatableProps } from "react-select/creatable";
-
+import ReactSelect, {
+  type ActionMeta,
+  components,
+  type GroupBase,
+  type Props as ReactSelectProps,
+  type StylesConfig,
+} from "react-select";
+import ReactSelectCreatable, { type CreatableProps } from "react-select/creatable";
 import { ThemeStore } from "../../theme.store";
 import { autoBind, cssNames } from "../../utils";
+import { merge } from "lodash";
 
 const { Menu } = components;
 
 export interface GroupSelectOption<T extends SelectOption = SelectOption> {
-  label: ReactNode;
+  label: React.ReactNode;
   options: T[];
 }
 
@@ -31,7 +34,7 @@ export interface SelectOption<T = any> {
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean> {
+export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean, GroupBase<T>> {
   id?: string; // Optional only because of Extension API. Required to make Select deterministic in unit tests
   value?: T;
   themeName?: "dark" | "light" | "outlined" | "lens";
@@ -61,12 +64,16 @@ export class Select extends React.Component<SelectProps> {
     return `theme-${themeName}`;
   }
 
-  private styles: Styles<OptionTypeBase, boolean> = {
-    menuPortal: styles => ({
-      ...styles,
-      zIndex: "auto",
-    }),
-  };
+  @computed get styles(): StylesConfig {
+    const defaultStyles: StylesConfig = {
+      menuPortal: styles => ({
+        ...styles,
+        zIndex: "auto",
+      }),
+    };
+
+    return merge(defaultStyles, this.props.styles);
+  }
 
   protected isValidOption(opt: SelectOption | any) {
     return typeof opt === "object" && opt.value !== undefined;
@@ -104,7 +111,7 @@ export class Select extends React.Component<SelectProps> {
     }
   }
 
-  onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
+  onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);
     }
@@ -122,7 +129,7 @@ export class Select extends React.Component<SelectProps> {
 
     const selectProps: Partial<SelectProps> = {
       ...props,
-      ...(inputId ? { inputId }: {}),
+      ...(inputId ? { inputId } : {}),
       styles: this.styles,
       value: autoConvertOptions ? this.selectedOption : value,
       options: autoConvertOptions ? this.options : options,
@@ -142,7 +149,7 @@ export class Select extends React.Component<SelectProps> {
     };
 
     return isCreatable
-      ? <ReactSelectCreatable {...selectProps}/>
-      : <ReactSelect {...selectProps}/>;
+      ? <ReactSelectCreatable {...selectProps} /> // select list with ability to add new options
+      : <ReactSelect {...selectProps} />;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 972b23276a..2fd51e9d1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -92,13 +92,20 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.1":
+"@babel/helper-module-imports@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz#dd331bd45bccc566ce77004e9d05fe17add13876"
   integrity sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-module-imports@^7.12.13":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz#24e2f08ee6832c60b157bb0936c86bef7210c622"
@@ -129,6 +136,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-replace-supers@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz#ec6859d20c5d8087f6a2dc4e014db7228975f13d"
@@ -164,6 +176,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helpers@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.1.tgz#a6827b7cb975c9d9cef5fd61d919f60d8844a973"
@@ -231,6 +248,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.1.tgz#fffee77b4934ce77f3b427649ecdddbec1958550"
@@ -295,6 +319,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.3.3":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@@ -328,6 +359,14 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -409,79 +448,85 @@
     minimatch "^3.0.4"
     plist "^3.0.4"
 
-"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
-  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
   dependencies:
-    "@emotion/sheet" "0.9.4"
-    "@emotion/stylis" "0.8.5"
-    "@emotion/utils" "0.11.3"
-    "@emotion/weak-memoize" "0.2.5"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
 
-"@emotion/core@^10.0.9":
-  version "10.0.28"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
-  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
 
-"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
-  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
-  dependencies:
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
+"@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
-  version "0.11.16"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
-  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+"@emotion/react@^11.1.1":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
   dependencies:
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/unitless" "0.7.5"
-    "@emotion/utils" "0.11.3"
-    csstype "^2.5.7"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
 
-"@emotion/sheet@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
-  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.3.tgz#99e2060c26c6292469fb30db41f4690e1c8fea63"
+  integrity sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
 
-"@emotion/stylis@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
-  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -1836,7 +1881,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@*", "@types/react-transition-group@^4.2.0":
+"@types/react-transition-group@*", "@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
   integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
@@ -2969,22 +3021,6 @@ babel-jest@^26.6.3:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-plugin-emotion@^10.0.27:
-  version "10.0.33"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
-  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/serialize" "^0.11.16"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -3006,7 +3042,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.0.0:
+babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -3015,11 +3051,6 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -4350,7 +4381,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.7:
+csstype@^2.5.2, csstype@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -6645,7 +6676,7 @@ history@^4.10.1, history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -10772,7 +10803,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10985,13 +11016,6 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -11068,18 +11092,17 @@ react-select-event@^5.3.0:
   dependencies:
     "@testing-library/dom" ">=7"
 
-react-select@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
-  integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==
+react-select@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.3.0.tgz#dc77c1f95e1037ec4cb01c5e5d6272d80be8d3f6"
+  integrity sha512-GM6Fbv1+X+kb3e5Fc4oNeyOJkCIesY/D4NBiReKlGY4RxoeztFYm3J0KREgwMaIKQqwTiuLqTlpUBY3SYw5goQ==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^10.0.9"
-    "@emotion/core" "^10.0.9"
-    "@emotion/css" "^10.0.9"
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
 react-swipeable@^6.1.0:
@@ -12547,6 +12570,11 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 stylus@^0.54.8:
   version "0.54.8"
   resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147"

From d1ae30a562d5f10bb9a46ba184f942e96f8b4c4a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 27 Apr 2022 15:48:49 +0300
Subject: [PATCH 11/14] Fix misleading no metrics message (#5240)

* Add NoMetrics style module

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add Open Cluster Settings link

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tune NoMetrics layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add test for clicking Open Settings link

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add data-testid

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use navigateToEntitySettings instead of broadcastMessage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix test selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 integration/__tests__/cluster-pages.tests.ts  |  5 +++
 .../+cluster/cluster-no-metrics.module.scss   | 18 +++++++++
 .../+cluster/cluster-no-metrics.tsx           | 39 +++++++++++++++++--
 .../+cluster/cluster-pie-charts.module.scss   |  7 +++-
 .../+cluster/cluster-pie-charts.tsx           |  6 ++-
 5 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/components/+cluster/cluster-no-metrics.module.scss

diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts
index 0027588298..981628b1ba 100644
--- a/integration/__tests__/cluster-pages.tests.ts
+++ b/integration/__tests__/cluster-pages.tests.ts
@@ -39,6 +39,11 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
     await frame.waitForSelector(`.Menu >> text="Remove"`);
   });
 
+  it("opens cluster settings by clicking link in no-metrics area", async () => {
+    await frame.locator("text=Open cluster settings >> nth=0").click();
+    await window.waitForSelector(`[data-testid="metrics-header"]`);
+  });
+
   it(
     "should navigate around common cluster pages",
 
diff --git a/src/renderer/components/+cluster/cluster-no-metrics.module.scss b/src/renderer/components/+cluster/cluster-no-metrics.module.scss
new file mode 100644
index 0000000000..2ad031f434
--- /dev/null
+++ b/src/renderer/components/+cluster/cluster-no-metrics.module.scss
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ClusterNoMetrics {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.7;
+  flex-grow: 1;
+
+  .link {
+    color: var(--blue);
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/+cluster/cluster-no-metrics.tsx b/src/renderer/components/+cluster/cluster-no-metrics.tsx
index c8638c2602..5c981008be 100644
--- a/src/renderer/components/+cluster/cluster-no-metrics.tsx
+++ b/src/renderer/components/+cluster/cluster-no-metrics.tsx
@@ -3,20 +3,53 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import styles from "./cluster-no-metrics.module.scss";
+
 import React from "react";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
+import type { NavigateToEntitySettings } from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import navigateToEntitySettingsInjectable from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster.injectable";
 
 export interface ClusterNoMetricsProps {
   className: string;
 }
 
-export function ClusterNoMetrics({ className }: ClusterNoMetricsProps) {
+interface Dependencies {
+  navigateToEntitySettings: NavigateToEntitySettings;
+  clusterId: string | undefined;
+}
+
+export function NonInjectedClusterNoMetrics({ className, navigateToEntitySettings, clusterId }: Dependencies & ClusterNoMetricsProps) {
+  function openMetricSettingsPage() {
+    if (clusterId) {
+      navigateToEntitySettings(clusterId, "metrics");
+    }
+  }
+
   return (
-    <div className={cssNames("ClusterNoMetrics flex column box grow justify-center align-center", className)}>
+    <div className={cssNames(styles.ClusterNoMetrics, className)} data-testid="no-metrics-message">
       <Icon material="info"/>
       <p>Metrics are not available due to missing or invalid Prometheus configuration.</p>
-      <p>Right click cluster icon to open cluster settings.</p>
+      <p><span className={styles.link} onClick={openMetricSettingsPage}>Open cluster settings</span></p>
     </div>
   );
 }
+
+export const ClusterNoMetrics = withInjectables<Dependencies, ClusterNoMetricsProps>(
+  NonInjectedClusterNoMetrics,
+
+  {
+    getProps: (di, props) => {
+      const cluster = di.inject(hostedClusterInjectable);
+
+      return {
+        navigateToEntitySettings: di.inject(navigateToEntitySettingsInjectable),
+        clusterId: cluster?.id,
+        ...props,
+      };
+    },
+  },
+);
diff --git a/src/renderer/components/+cluster/cluster-pie-charts.module.scss b/src/renderer/components/+cluster/cluster-pie-charts.module.scss
index abedbb7038..9ec9564da0 100644
--- a/src/renderer/components/+cluster/cluster-pie-charts.module.scss
+++ b/src/renderer/components/+cluster/cluster-pie-charts.module.scss
@@ -7,7 +7,7 @@
   background: var(--contentColor);
   min-height: 280px;
   text-align: center;
-  padding: calc(var(--padding) * 2) 0;
+  padding: calc(var(--padding) * 2);
 }
 
 .chart {
@@ -15,3 +15,8 @@
   background: var(--contentColor);
   padding: calc(var(--padding) * 2) var(--padding);
 }
+
+.noMetrics {
+  display: flex;
+  flex-grow: 1;
+}
diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx
index 259a0e4741..3121904e08 100644
--- a/src/renderer/components/+cluster/cluster-pie-charts.tsx
+++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx
@@ -232,7 +232,11 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
     const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity) {
-      return <ClusterNoMetrics className={styles.empty}/>;
+      return (
+        <div className={styles.noMetrics}>
+          <ClusterNoMetrics className={styles.empty}/>
+        </div>
+      );
     }
 
     return renderCharts();

From ff119dabf722c31667c613c4d26aac1c22c9a65e Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>
Date: Wed, 27 Apr 2022 11:55:23 -0400
Subject: [PATCH 12/14] adding https_proxy to execHelm env (#5273)

* adding https_proxy to execHelm env

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* lint plus simplification

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 src/main/helm/exec.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/main/helm/exec.ts b/src/main/helm/exec.ts
index 8d8d0d4340..5d0305b2f6 100644
--- a/src/main/helm/exec.ts
+++ b/src/main/helm/exec.ts
@@ -7,6 +7,7 @@ import { promiseExecFile } from "../../common/utils/promise-exec";
 import type { BaseEncodingOptions } from "fs";
 import type { ExecFileOptions } from "child_process";
 import { helmBinaryPath } from "../../common/vars";
+import { UserStore } from "../../common/user-store";
 
 /**
  * ExecFile the bundled helm CLI
@@ -14,7 +15,15 @@ import { helmBinaryPath } from "../../common/vars";
  */
 export async function execHelm(args: string[], options?: BaseEncodingOptions & ExecFileOptions): Promise<string> {
   try {
-    const { stdout } = await promiseExecFile(helmBinaryPath.get(), args, options);
+    const opts = { ...options };
+
+    opts.env ??= process.env;
+
+    if (!opts.env.HTTPS_PROXY && UserStore.getInstance().httpsProxy) {
+      opts.env.HTTPS_PROXY = UserStore.getInstance().httpsProxy;
+    }
+
+    const { stdout } = await promiseExecFile(helmBinaryPath.get(), args, opts);
 
     return stdout;
   } catch (error) {

From 51a93b8cc0b305c54e1eee7505ae9579b434bc99 Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>
Date: Wed, 27 Apr 2022 11:56:07 -0400
Subject: [PATCH 13/14] reverting flushHeaders() fix to restore auto-refresh
 (#5283)

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 src/main/lens-proxy.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/main/lens-proxy.ts b/src/main/lens-proxy.ts
index f37b7a087c..945c7269e8 100644
--- a/src/main/lens-proxy.ts
+++ b/src/main/lens-proxy.ts
@@ -173,15 +173,6 @@ export class LensProxy extends Singleton {
         this.retryCounters.delete(retryCounterId);
       }
 
-      if (!res.headersSent && req.url) {
-        const url = new URL(req.url, "http://localhost");
-
-        if (url.searchParams.has("watch")) {
-          res.statusCode = proxyRes.statusCode;
-          res.flushHeaders();
-        }
-      }
-
       proxyRes.on("aborted", () => { // happens when proxy target aborts connection
         res.end();
       });

From 8ada3c7505ef46343b0b84318f7c601609e3cf9b Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 28 Apr 2022 09:31:57 -0700
Subject: [PATCH 14/14] Compute Tray Icon on the fly instead of at build
 (#5157)

---
 build/build_tray_icon.ts                 |  55 --------------
 build/tray/trayIconDarkTemplate.png      | Bin 422 -> 0 bytes
 build/tray/trayIconDarkTemplate@2x.png   | Bin 925 -> 0 bytes
 build/tray/trayIconDarkTemplate@3x.png   | Bin 1496 -> 0 bytes
 build/tray/trayIconTemplate.png          | Bin 460 -> 0 bytes
 build/tray/trayIconTemplate@2x.png       | Bin 1107 -> 0 bytes
 build/tray/trayIconTemplate@3x.png       | Bin 1821 -> 0 bytes
 package.json                             |   5 +-
 src/common/utils/collection-functions.ts |  11 +++
 src/main/index.ts                        |   2 +-
 src/main/tray/tray.ts                    |  88 +++++++++++++++++------
 11 files changed, 84 insertions(+), 77 deletions(-)
 delete mode 100644 build/build_tray_icon.ts
 delete mode 100644 build/tray/trayIconDarkTemplate.png
 delete mode 100644 build/tray/trayIconDarkTemplate@2x.png
 delete mode 100644 build/tray/trayIconDarkTemplate@3x.png
 delete mode 100644 build/tray/trayIconTemplate.png
 delete mode 100644 build/tray/trayIconTemplate@2x.png
 delete mode 100644 build/tray/trayIconTemplate@3x.png

diff --git a/build/build_tray_icon.ts b/build/build_tray_icon.ts
deleted file mode 100644
index 0850011815..0000000000
--- a/build/build_tray_icon.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import path from "path";
-import sharp from "sharp";
-import jsdom from "jsdom";
-import fs from "fs-extra";
-
-export async function generateTrayIcon(
-  {
-    outputFilename = "trayIcon",
-    svgIconPath = path.resolve(__dirname, "../src/renderer/components/icon/logo-lens.svg"),
-    outputFolder = path.resolve(__dirname, "./tray"),
-    dpiSuffix = "2x",
-    pixelSize = 32,
-    shouldUseDarkColors = false, // managed by electron.nativeTheme.shouldUseDarkColors
-  } = {}) {
-  outputFilename += `${shouldUseDarkColors ? "Dark" : ""}Template`; // e.g. output trayIconDarkTemplate@2x.png
-  dpiSuffix = dpiSuffix !== "1x" ? `@${dpiSuffix}` : "";
-  const pngIconDestPath = path.resolve(outputFolder, `${outputFilename}${dpiSuffix}.png`);
-
-  try {
-    // Modify .SVG colors
-    const trayIconColor = shouldUseDarkColors ? "black" : "white";
-    const svgDom = await jsdom.JSDOM.fromFile(svgIconPath);
-    const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
-
-    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`;
-    const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
-    // Resize and convert to .PNG
-    const pngIconBuffer: Buffer = await sharp(svgIconBuffer)
-      .resize({ width: pixelSize, height: pixelSize })
-      .png()
-      .toBuffer();
-
-    // Save icon
-    await fs.writeFile(pngIconDestPath, pngIconBuffer);
-    console.info(`[DONE]: Tray icon saved at "${pngIconDestPath}"`);
-  } catch (err) {
-    console.error(`[ERROR]: ${err}`);
-  }
-}
-
-// Run
-const iconSizes: Record<string, number> = {
-  "1x": 16,
-  "2x": 32,
-  "3x": 48,
-};
-
-Object.entries(iconSizes).forEach(([dpiSuffix, pixelSize]) => {
-  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: false });
-  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: true });
-});
diff --git a/build/tray/trayIconDarkTemplate.png b/build/tray/trayIconDarkTemplate.png
deleted file mode 100644
index d0a4bdce20d5ed491c75a70108b6dff15ff999b2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkPSV=@dR5;6Zld(zzK@f&d4Ood_DjQF<3#71+;6s=`DEb_UX*70u
zfh5=@VkdckU>RRPJ1fshTP2c0JpVcV(cg6)`0jSuo!yy#XOiT{7G#`)L(l|gpqBi$
z#bEyJY>pRT26ABsbip+!bMI2@fO9&0f;q>hpdyDofod4Z78rnakjds}unH!ezw!Sl
zkrdYFLLD^ZfFp1aq~na;c>}ykcq`xzJTNtj>;??MB^ZG#&;!c})y^g76R^i<+$@bY
z*NhhEfZc?XoXUTIcd$vvk{mLPq+tRVpK#$;97~d_U*gYfmlt7lIPnnM4BM^Fv|2&B
zmVO~bkHU;7)R4mUDWnN{Pk}Re($sGl|MOJ#gvT<sC*J3Hpmk7YacHqjn8u47kg?dz
zc{^;3D(k>ES47}B%R6Ve|1ocjH8xC_4W#MJ*l1~_d!sE{V=FhQb{cE_FYS+e+;9O3
QZvX%Q07*qoM6N<$f_8DU@Bjb+

diff --git a/build/tray/trayIconDarkTemplate@2x.png b/build/tray/trayIconDarkTemplate@2x.png
deleted file mode 100644
index 46615aa5bf4b72a70c980921669f77c47e985952..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 925
zcmV;O17iG%P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkRPf0{UR9M5US36HsK@`5rLokux3nC4P8XGJ91IA)iN+3oJ6dEbC
zR~iHniJ`;5Mq4ci4KXBAsGS=N5^W5`N9D4hNGvuQL|_+pJwv`RABUN}cNZr4a(B<1
znRDjMc})<6kC>p+L9Z3;18N-el~}u@!Gh}q?Sh0LDM$%2z?|Tfpn;Tj?NQb^B)BhF
z5EP1F4E#p~(}F?4e$Xn)wMM7lI|<nkWbyrruc7}CG-1s!@qZOuQP&yS?B{8tECl8W
zhMvRs7S@~w&CIXU`jJwV2;f+6>Es0^+|p(Q)mSs76x$%a@h~MS@O>n>hTkn%tWTc@
z&CIoew~d6dqIp=*{2o=Zwwe7R7(Wa4f;OQ}#lN3}XOCdEh_&)W@6gd<&2a!uV}<mB
zep0aN*wmcr6nMIoVtLv}U)dre>%VNPNk15@^ZXJV!`u)FutJ6@?3N&C4T|}&g0+3x
z3MQMS>AtOyr(~Tpor+H}8Im7dFv>Kt54ar2n(i!kx@dzNpqWI|Be(|(_TvAY5Zo0s
zvjU@}nU3){#P?qCA=sU<B}KpXSim~Yb?}`N#8oI&Q89|sT^syyU>SS9<f@i(#Cw5a
z-4vVpkVFzwVH<`8$li3oj1pLIT*U(jsP>rDTI9Ikx5uKKz%r1%S!Od4GM+Kt3122t
z$_*6B3)>VhW|)s?wr3Hpz#i(0Co@_FQuYeWcmd+F$8oGv<=}|6SXC*D#A*I&h+`*R
z_qWsW5us{F(s32GFeP|lGm=AC0_j1r=|}SEp|0m9T~!xoXO#Kb0`06oBWYF&Cb9l7
z(zB(fk-p7%LRPT%KMz0Il9Bo_xe`)P)^L&~6e2SoI*Qd0=8g(}szNuwvSZYIE;>Bd
zmlwKK8>Y+kDoS~P>$CfO6CBi$W3AAkJlEHT&7uhj(3JQZmI?5f=H?S<mwfGdMUld!
z9jFbwtr0R_3wTYN_qbS3$i#6+Q)y2%MOkkqLeu)r^KuHplo%nCu4CgI?%a&qju_|D
zb5va@<(0%rTvmOeZNr-I7%8YnN|sJuz@w(KoQxJDpQy((YnsAtEJCRrM1I({uEkoW
z0T0nRdYq=v)FhDM>UQ&S>U*Bo(DS^u+~@f}Y~%K_Og<bS00000NkvXXu0mjfVg0Yo

diff --git a/build/tray/trayIconDarkTemplate@3x.png b/build/tray/trayIconDarkTemplate@3x.png
deleted file mode 100644
index 0c018f3ed358940957c9336f8cfd56926bf31863..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1496
zcmV;}1t<E6P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkTib+I4RA}DST5X6`We~pS-d!qF7bPQ1GeR<n)F{hHP{XAxG*U3!
z(nMOR%^%q}*pCE17YSPlBI$>P6>cj*DcA>6{)ngy4Es@G*r!1eMdf<W-FuohX5ev{
z_dV~q_wI%V9`4<H&Y3ea@60>T%-K?@xuZ;|1kP7-&Wnuy<tQ5uzko26&`IbbbQ9JR
z?j<ZDOeb^@61XRcFtX)}qXL%`dI)b2z9poDEP&Soo*#BY@Bs@6`w9OTO4bQAHYVlo
zLws&7$he;HK4DqFK`l8F_0V^e!lLL9E3Z-I>vpq@HvT*WGCm>PHXN&wfM>SB1BX~?
zOW_PY#q+-tE(N*E`S&xtLL&EN&J#4WY317qhe5GaDO&f0Q3g5jILJJY@D=}FgHQQ>
zf>*k!l}G^Y*vG=FIf|q5qR^M@O-bAh$~bgJ70xYg)QH6RK8f%rghieKbui#AkT=DU
zqaA`f*_}nhsSMlW0O3M7=kr`BbPgy5_5@^DM!3IkZe%6iWdZA9CC)cu*HQozcqYi4
z>$xt=G2&;!B{7v-EZhjf-0m^a*ga~75_Od)&nfR8iC95xgvff^2yZiVX2RAdH@~P9
zdCyQpAou=4xCrF0j#NIh601U?B$ge3n^4FcxOR3RY~*1*aQzs<cd9Pr8DQ;Zj;f5d
zRzkc#-`E{Qp~GqwUQnxq4?3zmwHdChH;Agr$%@4)`#qr{igkg}E~$P~28(xZh3gzU
z{Tm8ktwD$Z$8`u*V1NG06Bc5?H-u5Je2*zElrbwsxrZV`r6`tKx$vMT_H`&d11smk
z=?l1SkT4BoI%DrKu##{eCuI@1`|bytaaJDmD+6>gNqD$$xB~854A*TLDPCVPI;j&z
z0{g1#UX{?U==}jzJ2BeI3X?*2EFe6}tNu^{^zf&<Z$e2WS{lJFaV2hn`{zJ{S0ZT2
z{1)T^HbMXOutgc>#{uFOQ|+H;IfDgvqd~s!5fs{`=s{j#k=5#kej&CEOkf-S)nK==
z^<XP{q&twnmH`q*KN7|j@P0|<&iV%Eg&5F>2CR)Vz#?orn%H^VJ;ws<He|pqT+)>W
z!;FC#GQHrCDuEqoNr2s25CeKq;O%fSEr8Q}Uw?rxN{obls{qXw1D-&kSGQnWTOP3r
zqP(ltH^A>RR0xF(kn2|HLbj9e5_A9E1>jieD~ctSJ)=kYdw@w9CiJt$(7@LpWZ3B?
zBUJ4rT;_oiYvBBN!l^*dfJO8q^Q^OuiwQR}QJUQVt|MFvn8m-3SI_wfl=_}9)<Y;W
zV`3q{zltl0t)wJzwMm@e2mQc~kz)-gs0)&;(5J?>TKB|%MepAqs3mL^@}PAfyMsNh
z38SXqou2B9#dE9<e=*{2qbDee6o$1ZyVn?6=_aUMO#xG5|KF0=*dHxW8AEKf6Xae6
zVO95d7TeG(p~eiU0r5oN<|7u};i<|o^g=wgPkD5}(`%!nK2v&ZGV<lAJlY}&y|=(1
zSD!!49+YE|C#JIkqZpZVlw-^MIG({|k&O--y9vDH<b9qqio{Lhlp2Pu0;kM~<y#dP
zUZpukXa!EP=j2$|z%Y2H(&IzuJE9qHo6)daM(CYqHOQF2<HeY1oE`{Yqe7{v(!WH_
zN`3KrL>b?g!)-#VaIjT0M~t|M3rGgjHSIZk`#3A&6_n-qD!ezF+Nu}fZNQb@R3Rk|
z_8xWZ!HAa_SO;*vdW?BhONk~XkK-X<!vo#xqRZg?Qcs7al}^>$NjFz|8k{gJ?}`)X
zA0FVXc7tjYj|0ciB(G+K(NBc!gvlfI#vX;YtGAC&Mp6#9-M+@-oQ{$FR|B6R2~7Ch
y8_9>6boKG{pqG2t6-?Vl8M2bnId+s=q4>WyS8k)@a8iK)0000<MNUMnLSTZ`IK3(W

diff --git a/build/tray/trayIconTemplate.png b/build/tray/trayIconTemplate.png
deleted file mode 100644
index 16ada5ad319c6d0affdc5be51e4e271a2a6ffce9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 460
zcmV;-0W<!IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkPen~_@R5;6RQ@c(AQ4qZ@CRBz*DjU{lM?zsij2|Jrk?42G+JJQY
zfDjurc7_iimihzQSqYW48Vm*5>pA939L?V3?A*uBxie?(gcxJU^PE`YT<a9J4SNRL
z1NQAq=ZX2*ra9B`3RuLyV-FYrcR*GDmVOBMaRhxiU^`!G-UaH8Yz{Om5{qC5ixKP=
zFpIw|Z!i^Ls;y7iSBu05hB{~gNA9*0;5ZhKi4oL*4;S7BZhnG&QEH6r9vEZ)2KE}b
z1un5Jlb|hU%Q*uM7>)E{u1w=xXG90M0GdGy=1b*Qz!$JB=XF=Uhk`V^K`Q?rkIvCZ
zYAWx_mAS)%rov$)8E(!LZpEe0Qd$=6Qnt+>$`nMxP#_95mT*G}NkN|}uq!i5np&8X
zqB`LQmhjYVvBZa(kNi8R>T&qTGSwq`cLXy%HahPbK_Zd{Zk)TH>rP<ioNM0qjb)RP
z?4}xKpa$||p+-x60|v*IcxJV5Pc6;ImReO@^M!BOZ+Nu;xWpR(0000<MNUMnLSTYT
CMZeep

diff --git a/build/tray/trayIconTemplate@2x.png b/build/tray/trayIconTemplate@2x.png
deleted file mode 100644
index 73c40de994c6815df196d087a9f87875c7a4bcf5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1107
zcmV-Z1g!gsP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkS1xZ9fR9M5ES2<5qQ51f|qL^TC0RoMQ8XGG41I7ZB5{OZQg+>bP
zl|~jpW9TqIwAI4c5JMt`+CeNxv@sBuN;U;TK{PnB47~9i_|D|xaG3#b^5wpFw{z~<
zZxjVuI-O=D1o?3sM+S@+35tP(ZjT}#doyEuYJo$H=wU&lpkFW|m=G)ilY)1GGGcn$
z8GB}g7lQC{!2`ieI(vJ8eHDUH!9&3jjOAsOMnHUqYl1l<vMx-mq2JIR;|qdHFx^Az
ze+aIc+N2LNL3-716WIkiNQo-Jn4m3%{tnKlmOh2~RodT6=O>I_uG_0&ebC*q!ETx%
zPGe*8U5GtHj<I!;(o0fnMiNXg5B(Ft4Sd&O^Trm<tp+AGFjtR58%Rwor5F;_*5_zN
z-cm1N;Wxn{a6I5{#ow>7?|@*OZk=|jifvrZYl1uH8v`beqc9q4ZMa#L^vi)m*JS)G
z_O>|2Vmc>g#$?YdJZqCS-~K)pn(_P=oWfi;Hm8V454qhu2(74>z*9m<;+%FfcvFE!
zvnkSd3Jaf;bf)N5vodG57~Cx|s3~lj!;W!fvOHr0^3y<K@~(Css%WM&ZedIV%{@V<
zN>IjBZTjCDg3N6~zB>dbHW|P{edO=n$KR8ue3JE_LvHJ0NjCSk`FxhZFiU{k$SnFM
zHrEPjoGTSjGOB@bCZX@Y3>nvc31_}F28xha(g?2{Y|Pg+*_5~p>2GQgZXid_FuTy)
zQe+0WNCs$&yeb}nK;bT;H;J5<u|E_oV;97XhSDsyG@D_7qn+EJ;ydFbnS(Lcl_f4@
z7?9(OO$F2Gy|q_?d>;kI^itnLd4$wDVJc9(!Qc`M#UlyBO2H5<SrtGHd1QpOP|Njf
zhAqD%x-QBg(*3&E7j;$o9|@?!5>r1jph2O70>zF1f^Q8nZ3x?)2s&2v+$L2uW9%Fm
zw3(Nwq>-~>IdPUVlu{eS{!%0vYf}i{I`@pEuz_=@VJ8t6p6!@Sh7yS-80l9a%6a*&
z0FlR*tN{J(hRRL~ez`=~Wn};d6-_R)0n7Di)d;j8uU9)ATM%0oRDn<{o%2(040{v4
zAZc<*DebBoV{9BnNQ9zfw}NE=YqYreim}T~GgOj=5|hsj4Om<6vuL1XtAm8K%zNr%
zMieR(Q9$~l(rSbui+b`smZc1{v5)+6a<8lHm9eYadr73LxLFE1*ZI2vAJ2qu7_GI7
zuH@hTE^yp26IWcFXk}QXtXrU)+9PF+Zm!(S;c*iTT*227sUr{nC3t3yqW+8U49nJL
zu&2~V()~P4{lhW=36<d?I!TXHO)SHBxHejl2|Z5#=Y^aIy>QjAG@U9mtNA<uedm0h
Z{{vgMNK!!Juhswn002ovPDHLkV1i@R?`Qx3

diff --git a/build/tray/trayIconTemplate@3x.png b/build/tray/trayIconTemplate@3x.png
deleted file mode 100644
index d7a39b9260e971ea5a5dd39fb00f7dfc7b68ff28..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1821
zcmV+&2jcjNP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkU&q+i<RA}C{T5X6_WfYz}(^6ThC>qf>A(cd~VfH}_eb7=CYp7uC
zRwj~?n?KsV!G08&)e>PFK@|P4u)^IUC<XgK${!Kc28I2oFw#Duh$3@$X6N3{8O|A>
zIdkrN?>OUy!=1hNz3+Rz-gBOF-YpbbxRN9(#Bp4^3l)h<&U2-bz7J5*K079tPOgm7
zofj?|#!n=gPt->=NVJY<J<)AMONkZ`%_556o5&Ng<BS`PAp_?S4H1o#Fh9_}l7z1}
ztmZ)pP1fuv^E5GP>N=vg=-GcnmPvjvEy7gfceVB+j(cH_ONc%sS{YDKM+At>qVE}o
zmC>p&-#~PgW!y_L$8mDs4Rd@(bc5MH?Fk{Kj6gF_!h%&{8X48!3EWllf6?u9U}}{-
zpArk{^@{A1nxHMalW`kmzKdv&EXa&i;v;^8Oj|cfU{5?CZWs|APrtvF=hHIpGzhX^
zEN$JkrAQM2@v|K=c{zjeI`hI5U*Cw^=*Hb-ghOSN;axxTl1qpb%@;s`Gl>2Hw@4KL
zTuB93E{yPeXFKy)g<vGRIhQ-Z%OZrwH;GOHVHz|Sd*SEEGaa+jFt9B}`wc?SSbTq_
z4YOIXo(H`z6Ai2H()|SMyD1DP6RhDLn77v(=jgy%;#Z<mZT_&D$I$f{EX2{{G!SeR
z2oO60;68a4!zO*ZH=uo22nfONf+Af3RI(loeZa_zGEU?72M!}j`t9#Tb3r+4ax$L;
z_QYzNBfO2f6Fx$BxE!po#BNx}>_dQ?y6JuZ+$xU%I7Z!-p~}g~uhst58XX*l_82R?
zV60RRn{=NrntB|@V!~^Mbe&<GTbWk@#;loTG1b5zSd2H-pC%ltcCUwVj7|?}0+hLq
zhRVXwK4xC6i(2CN{BKG$Q31Xun!)CixPCukAu-yx$)LNF&R;9k3W)DFK>YPEjaubV
za65LVufbZAbUz=o&%)lSMDO+Y?L>FTrfh}yyE_$Tup%+;kD1MD!<xFsA)<4E$$l8O
z#Y2*5lv2fIj&I1wP)Y4~(!0erYK83v7IV`38?rV+k&?JmNkAb#yN2jKwmQ+>^gAyN
z$(_ArUQGazX1;+3aUd?MC9Va{aEKk0xk?^hNr`stTr1H6eHqMqG5J#u_yK53gDWcF
z^Rnh72MK`FSu`o@-&+@eJ{~miAS<z`wbnts5QWepSSx}s{D*^Xg9OmxiFz0nMiNt~
zgalAG`k839f!%qECEYv2M*%NXfYI7oBEWhRLNn95YJ%=hH{p|<tr_{|s{pzU3Gkd+
zAd>j12`i5oV}m>wxKKA-Flj_urfX;H!Nfq95!}Q#!b^6eOcJvnmhZ;whR)gH&;sQh
zr-(^|*($(;D8Pm7#x$uDv}2dWJZI}m!Ic&QT*-=rI&Pqz2Z%V4Z6$h{vA^_h@)D!c
zR}D%m8j#qK2WUMmRri?<{S3N@6HFQeqt`vS2O83It0_KD%7;yU6)?3H-p?WW%|yA_
z)E)Z#N5NSQ<~@bzG670Uq-Y5ekAZQEi7r;6=Zoa|93$K(AizQTdnO3GA*E@c+Sfhu
znp(5~9p)b0#By(krevX?L@~<XTINXtK|LWE2=ciTR&8A}ppe}n$B#tlYMXmn7upDJ
z#O=a^4q&W7a2VHzRUwqD+M?v-Ia8Z&Hk{ppkh+!94;HIHv$m!sS!~2MtsrcU10=yN
zV8x05TWm>b!`ws*nXxHKK;6&>u5*DjaT7;yuM9m;bBw&#G1%gX5X_+~-Q@Ir;*1<%
ztF|4eQR(m{9%P63{{_?!eBTUKQtdw+YO5d=*zUySI70?~e^@lAb1wCKI;Bt=g73QN
z`2kp9!seBxz9>N5+0uhavI-rigSHv8#PfZb(Tc>N!FgaVZ0OaXl!ch-o8XE)Mw0km
zN$J3)F~A9?TiudqV-C1%-ES+pH2wY<>W)&L?lh+NesheJI2{X&JZoT{dD32VGi#t1
z%408rz1i($`^+-}2!G4qn5Z0Rx9l~-k7i(-P)mN7MXtGzno>?BuaN31f$o~MMlUR~
zDCOWHwE3$LZKkBrP)OalEu53-!30Bsw~b3_fxXRWe^&tC+rkJLPozRyj0cRJI3q^5
z!8qhQSdfp4&I0YP@Ximgi!FX$F{hK<S9%1LkXd8rJ!Zua8$l!NE)KQyd=s=(x}^E4
z7{`LVX~&IzA$p4F%#NNB=RB?N($hx~_Mx1RgTw9X(hQrG#&}!W&+$JKC9qHgt@PzY
z_Xy}3mF~fa)UX2r+h;gRiIQXeA1nATH`swgjfJYYlz-J}i}C*faP|;i-SzBM00000
LNkvXXu0mjfe~M$w

diff --git a/package.json b/package.json
index 6be5a730ab..aadcaa981d 100644
--- a/package.json
+++ b/package.json
@@ -124,6 +124,9 @@
         "rpm",
         "AppImage"
       ],
+      "asarUnpack": [
+        "**/node_modules/sharp/**"
+      ],
       "extraResources": [
         {
           "from": "binaries/client/linux/${arch}/kubectl",
@@ -260,6 +263,7 @@
     "rfc6902": "^4.0.2",
     "selfsigned": "^2.0.1",
     "semver": "^7.3.7",
+    "sharp": "^0.30.3",
     "shell-env": "^3.0.1",
     "spdy": "^4.0.2",
     "tar": "^6.1.11",
@@ -388,7 +392,6 @@
     "react-window": "^1.8.6",
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
-    "sharp": "^0.30.3",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.23",
     "tar-stream": "^2.2.0",
diff --git a/src/common/utils/collection-functions.ts b/src/common/utils/collection-functions.ts
index 0329a52379..76646601eb 100644
--- a/src/common/utils/collection-functions.ts
+++ b/src/common/utils/collection-functions.ts
@@ -48,6 +48,17 @@ export function getOrInsertWith<K, V>(map: Map<K, V>, key: K, builder: () => V):
   return map.get(key);
 }
 
+/**
+ * Like {@link getOrInsertWith} but the builder is async and will be awaited before inserting into the map
+ */
+export async function getOrInsertWithAsync<K, V>(map: Map<K, V>, key: K, asyncBuilder: () => Promise<V>): Promise<V> {
+  if (!map.has(key)) {
+    map.set(key, await asyncBuilder());
+  }
+
+  return map.get(key);
+}
+
 /**
  * Set the value associated with `key` iff there was not a previous value
  * @param map The map to interact with
diff --git a/src/main/index.ts b/src/main/index.ts
index f6c0b1bbc0..5b4f965a93 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -305,7 +305,7 @@ async function main(di: DiContainer) {
 
   onQuitCleanup.push(
     initMenu(applicationMenuItems),
-    initTray(windowManager, trayMenuItems, navigateToPreferences),
+    await initTray(windowManager, trayMenuItems, navigateToPreferences),
     () => ShellSession.cleanup(),
   );
 
diff --git a/src/main/tray/tray.ts b/src/main/tray/tray.ts
index bef95610fd..af129ac27a 100644
--- a/src/main/tray/tray.ts
+++ b/src/main/tray/tray.ts
@@ -3,19 +3,23 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import path from "path";
 import packageInfo from "../../../package.json";
-import { Menu, Tray } from "electron";
+import type { NativeImage } from "electron";
+import { Menu, nativeImage, nativeTheme, Tray } from "electron";
 import type { IComputedValue } from "mobx";
 import { autorun } from "mobx";
 import { showAbout } from "../menu/menu";
 import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
 import type { WindowManager } from "../window-manager";
 import logger from "../logger";
-import { isDevelopment, isWindows, productName, staticFilesDirectory } from "../../common/vars";
+import { isWindows, productName } from "../../common/vars";
 import { exitApp } from "../exit-app";
-import { toJS } from "../../common/utils";
+import type { Disposer } from "../../common/utils";
+import { base64, disposer, getOrInsertWithAsync, toJS } from "../../common/utils";
 import type { TrayMenuRegistration } from "./tray-menu-registration";
+import sharp from "sharp";
+import LogoLens from "../../renderer/components/icon/logo-lens.svg";
+import { JSDOM } from "jsdom";
 
 
 const TRAY_LOG_PREFIX = "[TRAY]";
@@ -23,25 +27,69 @@ const TRAY_LOG_PREFIX = "[TRAY]";
 // note: instance of Tray should be saved somewhere, otherwise it disappears
 export let tray: Tray;
 
-export function getTrayIcon(): string {
-  return path.resolve(
-    staticFilesDirectory,
-    isDevelopment ? "../build/tray" : "icons", // copied within electron-builder extras
-    "trayIconTemplate.png",
-  );
+interface CreateTrayIconArgs {
+  shouldUseDarkColors: boolean;
+  size: number;
+  sourceSvg: string;
 }
 
-export function initTray(
+const trayIcons = new Map<boolean, NativeImage>();
+
+async function createTrayIcon({ shouldUseDarkColors, size, sourceSvg }: CreateTrayIconArgs): Promise<NativeImage> {
+  return getOrInsertWithAsync(trayIcons, shouldUseDarkColors, async () => {
+    const trayIconColor = shouldUseDarkColors ? "white" : "black"; // Invert to show contrast
+    const parsedSvg = base64.decode(sourceSvg.split("base64,")[1]);
+    const svgDom = new JSDOM(`<body>${parsedSvg}</body>`);
+    const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
+
+    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`;
+
+    const iconBuffer = await sharp(Buffer.from(svgRoot.outerHTML))
+      .resize({ width: size, height: size })
+      .png()
+      .toBuffer();
+
+    return nativeImage.createFromBuffer(iconBuffer);
+  });
+}
+
+function createCurrentTrayIcon() {
+  return createTrayIcon({
+    shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+    size: 16,
+    sourceSvg: LogoLens,
+  });
+}
+
+function watchShouldUseDarkColors(tray: Tray): Disposer {
+  let prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
+  const onUpdated = () => {
+    if (prevShouldUseDarkColors !== nativeTheme.shouldUseDarkColors) {
+      prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
+      createCurrentTrayIcon()
+        .then(img => tray.setImage(img));
+    }
+  };
+
+  nativeTheme.on("updated", onUpdated);
+
+  return () => nativeTheme.off("updated", onUpdated);
+}
+
+export async function initTray(
   windowManager: WindowManager,
   trayMenuItems: IComputedValue<TrayMenuRegistration[]>,
   navigateToPreferences: () => void,
-) {
-  const icon = getTrayIcon();
+): Promise<Disposer> {
+  const icon = await createCurrentTrayIcon();
+  const dispose = disposer();
 
   tray = new Tray(icon);
   tray.setToolTip(packageInfo.description);
   tray.setIgnoreDoubleClickEvents(true);
 
+  dispose.push(watchShouldUseDarkColors(tray));
+
   if (isWindows) {
     tray.on("click", () => {
       windowManager
@@ -50,7 +98,7 @@ export function initTray(
     });
   }
 
-  const disposers = [
+  dispose.push(
     autorun(() => {
       try {
         const menu = createTrayMenu(windowManager, toJS(trayMenuItems.get()), navigateToPreferences);
@@ -60,13 +108,13 @@ export function initTray(
         logger.error(`${TRAY_LOG_PREFIX}: building failed`, { error });
       }
     }),
-  ];
+    () => {
+      tray?.destroy();
+      tray = null;
+    },
+  );
 
-  return () => {
-    disposers.forEach(disposer => disposer());
-    tray?.destroy();
-    tray = null;
-  };
+  return dispose;
 }
 
 function getMenuItemConstructorOptions(trayItem: TrayMenuRegistration): Electron.MenuItemConstructorOptions {