From 46e42a3f3f85fb6a0775dd6b6efc7d99a7205376 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 17 Jul 2024 13:25:16 -0700
Subject: [PATCH 01/15] pre upgrade

---
 .../blueprint-overrides/_special-switch-modes.scss    | 10 +++++-----
 .../table-filterable-cell/table-filterable-cell.scss  |  2 +-
 web-console/src/utils/general.tsx                     |  4 ++--
 .../explore-view/control-pane/columns-input.scss      |  4 +++-
 .../views/explore-view/control-pane/control-pane.scss |  4 +++-
 .../filter-pane/filter-menu/filter-menu.scss          |  4 +++-
 .../explore-view/modules/time-chart-echarts-module.ts |  7 +++++--
 .../explore-view/resource-pane/resource-pane.tsx      | 11 +++++++----
 .../views/explore-view/source-pane/source-pane.scss   |  4 +++-
 .../views/explore-view/tile-picker/tile-picker.scss   |  6 ++++--
 10 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/web-console/src/blueprint-overrides/_special-switch-modes.scss b/web-console/src/blueprint-overrides/_special-switch-modes.scss
index 267ac4a27260..0d4c3928a27d 100644
--- a/web-console/src/blueprint-overrides/_special-switch-modes.scss
+++ b/web-console/src/blueprint-overrides/_special-switch-modes.scss
@@ -16,23 +16,23 @@
  * limitations under the License.
  */
 
-.bp4-dark .bp4-switch.bp4-control {
+.#{$ns}-dark .#{$ns}-switch.#{$ns}-control {
   &.legacy-switch {
-    input:checked ~ .bp4-control-indicator {
+    input:checked ~ .#{$ns}-control-indicator {
       background: $orange5;
     }
 
-    &:hover input:checked ~ .bp4-control-indicator {
+    &:hover input:checked ~ .#{$ns}-control-indicator {
       background: $orange2;
     }
   }
 
   &.danger-switch {
-    input:checked ~ .bp4-control-indicator {
+    input:checked ~ .#{$ns}-control-indicator {
       background: $red5;
     }
 
-    &:hover input:checked ~ .bp4-control-indicator {
+    &:hover input:checked ~ .#{$ns}-control-indicator {
       background: $red2;
     }
   }
diff --git a/web-console/src/components/table-filterable-cell/table-filterable-cell.scss b/web-console/src/components/table-filterable-cell/table-filterable-cell.scss
index bb3d61cd05ec..95e0d732cf6a 100644
--- a/web-console/src/components/table-filterable-cell/table-filterable-cell.scss
+++ b/web-console/src/components/table-filterable-cell/table-filterable-cell.scss
@@ -24,7 +24,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.bp4-popover2-target {
+  &.#{$ns}-popover2-target {
     display: block; // extra nesting for stronger CSS selectors
   }
 }
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index 9d6adf203acb..a4e32bbf126a 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Intent } from '@blueprintjs/core';
+import { Classes, Intent } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
 import copy from 'copy-to-clipboard';
@@ -554,7 +554,7 @@ export function objectHash(obj: any): string {
 }
 
 export function hasPopoverOpen(): boolean {
-  return Boolean(document.querySelector('.bp4-portal .bp4-overlay .bp4-popover2'));
+  return Boolean(document.querySelector(`${Classes.PORTAL} ${Classes.OVERLAY} ${Classes.POPOVER}`));
 }
 
 export function checkedCircleIcon(checked: boolean): IconName {
diff --git a/web-console/src/views/explore-view/control-pane/columns-input.scss b/web-console/src/views/explore-view/control-pane/columns-input.scss
index b78fb7d19342..2f7fc37e554d 100644
--- a/web-console/src/views/explore-view/control-pane/columns-input.scss
+++ b/web-console/src/views/explore-view/control-pane/columns-input.scss
@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
+@import '../../../variables';
+
 .columns-input {
-  .bp4-tag-input-values .bp4-tag {
+  .#{$ns}-tag-input-values .#{$ns}-tag {
     &.drop-before::after {
       content: '';
       height: 24px;
diff --git a/web-console/src/views/explore-view/control-pane/control-pane.scss b/web-console/src/views/explore-view/control-pane/control-pane.scss
index 8e029b413985..52e30069bc49 100644
--- a/web-console/src/views/explore-view/control-pane/control-pane.scss
+++ b/web-console/src/views/explore-view/control-pane/control-pane.scss
@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
+@import '../../../variables';
+
 .control-pane {
-  .bp4-tag-input-values .bp4-tag {
+  .#{$ns}-tag-input-values .#{$ns}-tag {
     vertical-align: top;
   }
 }
diff --git a/web-console/src/views/explore-view/filter-pane/filter-menu/filter-menu.scss b/web-console/src/views/explore-view/filter-pane/filter-menu/filter-menu.scss
index d919a526e71e..dbb850df020d 100644
--- a/web-console/src/views/explore-view/filter-pane/filter-menu/filter-menu.scss
+++ b/web-console/src/views/explore-view/filter-pane/filter-menu/filter-menu.scss
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+@import '../../../../variables';
+
 .filter-menu {
   width: 400px;
 
@@ -23,7 +25,7 @@
     padding: 15px;
   }
 
-  .controls .bp4-form-content {
+  .controls .#{$ns}-form-content {
     display: flex;
     gap: 15px;
 
diff --git a/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts b/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts
index 4f1322bf002d..2e2badcfa0f6 100644
--- a/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts
+++ b/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts
@@ -169,6 +169,8 @@ export default typedVisualModule({
       async update({ table, where, parameterValues, context }) {
         const { splitColumn, metric, numberToStack, showOthers, snappyHighlight } = parameterValues;
 
+        if (String(table).includes('select source')) return;
+
         // this should probably be a parameter
         const timeColumnName = '__time';
 
@@ -203,10 +205,11 @@ export default typedVisualModule({
                 direction: 'ASC',
               })
               .applyIf(splitColumn, q => {
-                const splitEx = splitColumn!.expression;
+                if (!splitColumn || !vs) return q; // Should never get here, doing this to make peace between eslint and TS
+                const splitEx = splitColumn.expression;
                 return q.addSelect(
                   (showOthers
-                    ? SqlCase.ifThenElse(splitEx.in(vs!), splitEx, L(OTHERS_VALUE))
+                    ? SqlCase.ifThenElse(splitEx.in(vs), splitEx, L(OTHERS_VALUE))
                     : splitEx
                   ).as(STACK_NAME),
                   { addToGroupBy: 'end' },
diff --git a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
index 8d0a6d3be8ae..5109ce77bd15 100644
--- a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
+++ b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { Icon, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { Classes, Icon, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import type { ExpressionMeta } from '@druid-toolkit/visuals-core';
+import classNames from 'classnames';
 import React, { useState } from 'react';
 
 import { caseInsensitiveContains, dataTypeToIcon, filterMap } from '../../../utils';
@@ -68,7 +69,7 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
               }
             >
               <div
-                className="bp4-menu-item"
+                className={Classes.MENU_ITEM}
                 draggable
                 onDragStart={e => {
                   e.dataTransfer.effectAllowed = 'all';
@@ -77,10 +78,12 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
                 }}
               >
                 <Icon
-                  className="bp4-menu-item-icon"
+                  className={Classes.MENU_ITEM_ICON}
                   icon={c.sqlType ? dataTypeToIcon(c.sqlType) : IconNames.BLANK}
                 />
-                <div className="bp4-fill bp4-text-overflow-ellipsis">{c.name}</div>
+                <div className={classNames(Classes.FILL, Classes.TEXT_OVERFLOW_ELLIPSIS)}>
+                  {c.name}
+                </div>
               </div>
             </Popover2>
           );
diff --git a/web-console/src/views/explore-view/source-pane/source-pane.scss b/web-console/src/views/explore-view/source-pane/source-pane.scss
index 19a86d83c388..741f16562fb8 100644
--- a/web-console/src/views/explore-view/source-pane/source-pane.scss
+++ b/web-console/src/views/explore-view/source-pane/source-pane.scss
@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
+@import '../../../variables';
+
 .source-pane {
-  .bp4-button-text {
+  .#{$ns}-button-text {
     flex: 1 1 auto;
   }
 }
diff --git a/web-console/src/views/explore-view/tile-picker/tile-picker.scss b/web-console/src/views/explore-view/tile-picker/tile-picker.scss
index 1f6b12b514e1..95d0dbcfb46f 100644
--- a/web-console/src/views/explore-view/tile-picker/tile-picker.scss
+++ b/web-console/src/views/explore-view/tile-picker/tile-picker.scss
@@ -16,12 +16,14 @@
  * limitations under the License.
  */
 
+@import '../../../variables';
+
 .tile-picker {
-  .picker-button .bp4-button-text {
+  .picker-button .#{$ns}-button-text {
     flex: 1 1 auto;
   }
 
-  .more-button.bp4-popover2-target {
+  .more-button.#{$ns}-popover2-target {
     flex: 0;
   }
 }

From 94e961563553875948742e717ce78833a6bffe13 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 17 Jul 2024 13:31:31 -0700
Subject: [PATCH 02/15] did the upgrade

---
 web-console/package-lock.json                 | 501 ++++++++----------
 web-console/package.json                      |  12 +-
 .../common/_variables.scss                    |   2 +-
 .../more-button/more-button.spec.tsx          |   4 +-
 .../values-filter-control.tsx                 |   6 +-
 web-console/unified-console.html              |   2 +-
 6 files changed, 240 insertions(+), 287 deletions(-)

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 2945955d9d66..af38ac1a0a1b 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -9,12 +9,12 @@
       "version": "31.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/core": "^4.20.1",
-        "@blueprintjs/datetime": "^4.4.36",
-        "@blueprintjs/datetime2": "^0.9.35",
-        "@blueprintjs/icons": "^4.16.0",
-        "@blueprintjs/popover2": "^1.14.9",
-        "@blueprintjs/select": "^4.9.24",
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/datetime": "^5.3.7",
+        "@blueprintjs/datetime2": "^2.3.7",
+        "@blueprintjs/icons": "^5.10.0",
+        "@blueprintjs/popover2": "^2.1.7",
+        "@blueprintjs/select": "^5.2.1",
         "@druid-toolkit/query": "^0.22.20",
         "@druid-toolkit/visuals-core": "^0.3.3",
         "@druid-toolkit/visuals-react": "^0.3.3",
@@ -816,36 +816,35 @@
       "dev": true
     },
     "node_modules/@blueprintjs/colors": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.2.1.tgz",
-      "integrity": "sha512-Cx7J2YnUuxn+fi+y5XtXnBB7+cFHN4xBrRkaAetp78i3VTCXjUk+d1omrOr8TqbRucUXTdrhbZOUHpzRLFcJpQ==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.1.tgz",
+      "integrity": "sha512-Mni/GgCYLaMf5U5zsCN42skOG49w3U0QmUFuJgFZ/1pv+3cHF/9xR4L4dXcj5DtgJoHkmUbK36PR5mdFB65WEA==",
       "dependencies": {
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "node_modules/@blueprintjs/core": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.2.tgz",
-      "integrity": "sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==",
-      "dependencies": {
-        "@blueprintjs/colors": "^4.2.1",
-        "@blueprintjs/icons": "^4.16.0",
-        "@juggle/resize-observer": "^3.4.0",
-        "@types/dom4": "^2.0.2",
+      "version": "5.10.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.10.5.tgz",
+      "integrity": "sha512-mvTB+Ox31nt9830hEgVOi/A53QI71hpOzV/7i3ZgzzrYAaEGgFMcwa7X0kn9PSOGfxw87nWL9VpYSirnzpC6lw==",
+      "dependencies": {
+        "@blueprintjs/colors": "^5.1.1",
+        "@blueprintjs/icons": "^5.10.0",
+        "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
-        "dom4": "^2.1.5",
         "normalize.css": "^8.0.1",
-        "popper.js": "^1.16.1",
-        "react-popper": "^1.3.11",
+        "react-popper": "^2.3.0",
         "react-transition-group": "^4.4.5",
-        "tslib": "~2.5.0"
+        "react-uid": "^2.3.3",
+        "tslib": "~2.6.2",
+        "use-sync-external-store": "^1.2.0"
       },
       "bin": {
         "upgrade-blueprint-2.0.0-rename": "scripts/upgrade-blueprint-2.0.0-rename.sh",
         "upgrade-blueprint-3.0.0-rename": "scripts/upgrade-blueprint-3.0.0-rename.sh"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.32 || 17 || 18",
+        "@types/react": "^16.14.41 || 17 || 18",
         "react": "^16.8 || 17 || 18",
         "react-dom": "^16.8 || 17 || 18"
       },
@@ -855,35 +854,22 @@
         }
       }
     },
-    "node_modules/@blueprintjs/core/node_modules/react-popper": {
-      "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
-      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "@hypnosphi/create-react-context": "^0.3.1",
-        "deep-equal": "^1.1.1",
-        "popper.js": "^1.14.4",
-        "prop-types": "^15.6.1",
-        "typed-styles": "^0.0.7",
-        "warning": "^4.0.2"
-      },
-      "peerDependencies": {
-        "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/@blueprintjs/datetime": {
-      "version": "4.4.36",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-4.4.36.tgz",
-      "integrity": "sha512-+0zMGorGNjR/5lEB2t7sjVX0jWPVgmFkHTIezhAIQgJAj0upcxF3SuvnrpVjJKA3Ug6/0wZ+76eLPbpNz9CVzA==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.7.tgz",
+      "integrity": "sha512-6rDMqSU8jeiAlMxS30MYAQc4X1sfMGWwFjfs3IoKxJfcfieN+ytus5G+if6zjsSKUjdhL9+qBTgKRo3VJJEQ3g==",
       "dependencies": {
-        "@blueprintjs/core": "^4.20.1",
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/icons": "^5.10.0",
+        "@blueprintjs/select": "^5.2.1",
         "classnames": "^2.3.1",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^2.0.0",
         "react-day-picker": "7.4.9",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.32 || 17",
+        "@types/react": "^16.14.41 || 17",
         "react": "^16.8 || 17",
         "react-dom": "^16.8 || 17"
       },
@@ -894,24 +880,23 @@
       }
     },
     "node_modules/@blueprintjs/datetime2": {
-      "version": "0.9.35",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-0.9.35.tgz",
-      "integrity": "sha512-9vuhKtVj8GwtB3fx4xnzQWc1g4kH6NB3QqotDI1azJrzTOVVEqzYs+RVGwLw60/WAR2PD+L/WJkthRIS6/wKAw==",
-      "dependencies": {
-        "@blueprintjs/core": "^4.20.1",
-        "@blueprintjs/datetime": "^4.4.36",
-        "@blueprintjs/popover2": "^1.14.9",
-        "@blueprintjs/select": "^4.9.22",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.7.tgz",
+      "integrity": "sha512-Q6IBo5hcvoDtH9FsFaysZhadXNS6iyhuyaRY+rJD3y3qLaUt6wiYDhw5LN6L4wuasbPO1g0lVDwY6bkGuIG4jg==",
+      "dependencies": {
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/datetime": "^5.3.7",
+        "@blueprintjs/icons": "^5.10.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
-        "date-fns-tz": "^1.3.7",
-        "lodash": "^4.17.21",
-        "tslib": "~2.5.0"
+        "react-day-picker": "^8.10.0",
+        "react-innertext": "^1.1.5",
+        "tslib": "~2.6.2"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.32 || 17",
-        "react": "^16.8 || 17",
-        "react-dom": "^16.8 || 17"
+        "@types/react": "^16.14.41 || 17 || 18",
+        "react": "^16.8 || 17 || 18",
+        "react-dom": "^16.8 || 17 || 18"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -919,31 +904,50 @@
         }
       }
     },
+    "node_modules/@blueprintjs/datetime2/node_modules/react-day-picker": {
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@blueprintjs/icons": {
-      "version": "4.16.0",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.16.0.tgz",
-      "integrity": "sha512-cyfgjUZcZCtQrXWUV8FwqYTFEzduV4a0N7yhOU38jY+cBRCLu/sDrD0Osvfk4DGRvNe4YjY7pohVLFSxpg68Uw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.10.0.tgz",
+      "integrity": "sha512-Qp9H2U2/m6+p0Lh9ACuF2O6o0uVINMFimo+EgasgGaLx8SkJsl7ApB3hYQ+iRSYlQWotnoqd4Vtzj4c7sKukHQ==",
       "dependencies": {
         "change-case": "^4.1.2",
         "classnames": "^2.3.1",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.14.41 || 17 || 18",
+        "react": "^16.8 || 17 || 18",
+        "react-dom": "^16.8 || 17 || 18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@blueprintjs/popover2": {
-      "version": "1.14.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.11.tgz",
-      "integrity": "sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-2.1.7.tgz",
+      "integrity": "sha512-ekulhvHgIwgK709HI7qGzGu3nnye1jg2iNulmIyf85YkEPThZ2KnCdM0qr2BhAlB0ZwmemXnOXCj2RBMX37E0A==",
       "dependencies": {
-        "@blueprintjs/core": "^4.20.2",
-        "@juggle/resize-observer": "^3.4.0",
-        "@popperjs/core": "^2.11.7",
+        "@blueprintjs/core": "^5.10.5",
         "classnames": "^2.3.1",
-        "dom4": "^2.1.5",
-        "react-popper": "^2.3.0",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.32 || 17 || 18",
+        "@types/react": "^16.14.41 || 17 || 18",
         "react": "^16.8 || 17 || 18",
         "react-dom": "^16.8 || 17 || 18"
       },
@@ -954,17 +958,17 @@
       }
     },
     "node_modules/@blueprintjs/select": {
-      "version": "4.9.24",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.24.tgz",
-      "integrity": "sha512-OTjesxH/7UZvM7yAdHJ5u3sIjX1N8Rs4CQQ22AfqNl82SIROqkuXI31XEl6YNX1GsYfmAMiw0K7XohEKOMXR5g==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.1.tgz",
+      "integrity": "sha512-rXM9ik2mLd394g+sxwbHv2bGfrLbcdY9gFftqmJmm3vu7XJ2kRrsC1oOlNSC4dNBpUdHnyAzBTHEu81B1LkRbQ==",
       "dependencies": {
-        "@blueprintjs/core": "^4.20.2",
-        "@blueprintjs/popover2": "^1.14.11",
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/icons": "^5.10.0",
         "classnames": "^2.3.1",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.32 || 17 || 18",
+        "@types/react": "^16.14.41 || 17 || 18",
         "react": "^16.8 || 17 || 18",
         "react-dom": "^16.8 || 17 || 18"
       },
@@ -1291,19 +1295,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "node_modules/@hypnosphi/create-react-context": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
-      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
-      "dependencies": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": ">=0.14.0"
-      }
-    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2539,11 +2530,6 @@
       "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==",
       "dev": true
     },
-    "node_modules/@types/dom4": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@types/dom4/-/dom4-2.0.2.tgz",
-      "integrity": "sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g=="
-    },
     "node_modules/@types/enzyme": {
       "version": "3.10.17",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.17.tgz",
@@ -4448,6 +4434,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5521,11 +5508,11 @@
       }
     },
     "node_modules/date-fns-tz": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
-      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
       "peerDependencies": {
-        "date-fns": ">=2.0.0"
+        "date-fns": "2.x"
       }
     },
     "node_modules/debounce": {
@@ -5594,22 +5581,6 @@
         }
       }
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5650,6 +5621,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -5802,11 +5774,6 @@
         "entities": "^1.1.1"
       }
     },
-    "node_modules/dom4": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/dom4/-/dom4-2.1.6.tgz",
-      "integrity": "sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA=="
-    },
     "node_modules/domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
@@ -7634,6 +7601,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7660,6 +7628,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7836,11 +7805,6 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
-    "node_modules/gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -7917,6 +7881,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       },
@@ -7940,6 +7905,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7951,6 +7917,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8504,6 +8471,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8636,6 +8604,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8787,6 +8756,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -11512,7 +11482,8 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -12329,6 +12300,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
       "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -12344,6 +12316,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -12812,16 +12785,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -14745,6 +14708,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "peerDependencies": {
+        "@types/react": ">=0.0.0 <=99",
+        "react": ">=0.0.0 <=99"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -14856,6 +14828,26 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-uid": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.3.tgz",
+      "integrity": "sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-installed": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/read-installed/-/read-installed-4.0.3.tgz",
@@ -15028,6 +15020,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
       "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -17228,9 +17221,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -17313,11 +17306,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typed-styles": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
-      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
-    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -19022,107 +19010,96 @@
       "dev": true
     },
     "@blueprintjs/colors": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.2.1.tgz",
-      "integrity": "sha512-Cx7J2YnUuxn+fi+y5XtXnBB7+cFHN4xBrRkaAetp78i3VTCXjUk+d1omrOr8TqbRucUXTdrhbZOUHpzRLFcJpQ==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.1.tgz",
+      "integrity": "sha512-Mni/GgCYLaMf5U5zsCN42skOG49w3U0QmUFuJgFZ/1pv+3cHF/9xR4L4dXcj5DtgJoHkmUbK36PR5mdFB65WEA==",
       "requires": {
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "@blueprintjs/core": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.2.tgz",
-      "integrity": "sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==",
-      "requires": {
-        "@blueprintjs/colors": "^4.2.1",
-        "@blueprintjs/icons": "^4.16.0",
-        "@juggle/resize-observer": "^3.4.0",
-        "@types/dom4": "^2.0.2",
+      "version": "5.10.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.10.5.tgz",
+      "integrity": "sha512-mvTB+Ox31nt9830hEgVOi/A53QI71hpOzV/7i3ZgzzrYAaEGgFMcwa7X0kn9PSOGfxw87nWL9VpYSirnzpC6lw==",
+      "requires": {
+        "@blueprintjs/colors": "^5.1.1",
+        "@blueprintjs/icons": "^5.10.0",
+        "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
-        "dom4": "^2.1.5",
         "normalize.css": "^8.0.1",
-        "popper.js": "^1.16.1",
-        "react-popper": "^1.3.11",
+        "react-popper": "^2.3.0",
         "react-transition-group": "^4.4.5",
-        "tslib": "~2.5.0"
-      },
-      "dependencies": {
-        "react-popper": {
-          "version": "1.3.11",
-          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
-          "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
-          "requires": {
-            "@babel/runtime": "^7.1.2",
-            "@hypnosphi/create-react-context": "^0.3.1",
-            "deep-equal": "^1.1.1",
-            "popper.js": "^1.14.4",
-            "prop-types": "^15.6.1",
-            "typed-styles": "^0.0.7",
-            "warning": "^4.0.2"
-          }
-        }
+        "react-uid": "^2.3.3",
+        "tslib": "~2.6.2",
+        "use-sync-external-store": "^1.2.0"
       }
     },
     "@blueprintjs/datetime": {
-      "version": "4.4.36",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-4.4.36.tgz",
-      "integrity": "sha512-+0zMGorGNjR/5lEB2t7sjVX0jWPVgmFkHTIezhAIQgJAj0upcxF3SuvnrpVjJKA3Ug6/0wZ+76eLPbpNz9CVzA==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.7.tgz",
+      "integrity": "sha512-6rDMqSU8jeiAlMxS30MYAQc4X1sfMGWwFjfs3IoKxJfcfieN+ytus5G+if6zjsSKUjdhL9+qBTgKRo3VJJEQ3g==",
       "requires": {
-        "@blueprintjs/core": "^4.20.1",
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/icons": "^5.10.0",
+        "@blueprintjs/select": "^5.2.1",
         "classnames": "^2.3.1",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^2.0.0",
         "react-day-picker": "7.4.9",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "@blueprintjs/datetime2": {
-      "version": "0.9.35",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-0.9.35.tgz",
-      "integrity": "sha512-9vuhKtVj8GwtB3fx4xnzQWc1g4kH6NB3QqotDI1azJrzTOVVEqzYs+RVGwLw60/WAR2PD+L/WJkthRIS6/wKAw==",
-      "requires": {
-        "@blueprintjs/core": "^4.20.1",
-        "@blueprintjs/datetime": "^4.4.36",
-        "@blueprintjs/popover2": "^1.14.9",
-        "@blueprintjs/select": "^4.9.22",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.7.tgz",
+      "integrity": "sha512-Q6IBo5hcvoDtH9FsFaysZhadXNS6iyhuyaRY+rJD3y3qLaUt6wiYDhw5LN6L4wuasbPO1g0lVDwY6bkGuIG4jg==",
+      "requires": {
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/datetime": "^5.3.7",
+        "@blueprintjs/icons": "^5.10.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
-        "date-fns-tz": "^1.3.7",
-        "lodash": "^4.17.21",
-        "tslib": "~2.5.0"
+        "react-day-picker": "^8.10.0",
+        "react-innertext": "^1.1.5",
+        "tslib": "~2.6.2"
+      },
+      "dependencies": {
+        "react-day-picker": {
+          "version": "8.10.1",
+          "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+          "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA=="
+        }
       }
     },
     "@blueprintjs/icons": {
-      "version": "4.16.0",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.16.0.tgz",
-      "integrity": "sha512-cyfgjUZcZCtQrXWUV8FwqYTFEzduV4a0N7yhOU38jY+cBRCLu/sDrD0Osvfk4DGRvNe4YjY7pohVLFSxpg68Uw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.10.0.tgz",
+      "integrity": "sha512-Qp9H2U2/m6+p0Lh9ACuF2O6o0uVINMFimo+EgasgGaLx8SkJsl7ApB3hYQ+iRSYlQWotnoqd4Vtzj4c7sKukHQ==",
       "requires": {
         "change-case": "^4.1.2",
         "classnames": "^2.3.1",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "@blueprintjs/popover2": {
-      "version": "1.14.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.11.tgz",
-      "integrity": "sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-2.1.7.tgz",
+      "integrity": "sha512-ekulhvHgIwgK709HI7qGzGu3nnye1jg2iNulmIyf85YkEPThZ2KnCdM0qr2BhAlB0ZwmemXnOXCj2RBMX37E0A==",
       "requires": {
-        "@blueprintjs/core": "^4.20.2",
-        "@juggle/resize-observer": "^3.4.0",
-        "@popperjs/core": "^2.11.7",
+        "@blueprintjs/core": "^5.10.5",
         "classnames": "^2.3.1",
-        "dom4": "^2.1.5",
-        "react-popper": "^2.3.0",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "@blueprintjs/select": {
-      "version": "4.9.24",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.24.tgz",
-      "integrity": "sha512-OTjesxH/7UZvM7yAdHJ5u3sIjX1N8Rs4CQQ22AfqNl82SIROqkuXI31XEl6YNX1GsYfmAMiw0K7XohEKOMXR5g==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.1.tgz",
+      "integrity": "sha512-rXM9ik2mLd394g+sxwbHv2bGfrLbcdY9gFftqmJmm3vu7XJ2kRrsC1oOlNSC4dNBpUdHnyAzBTHEu81B1LkRbQ==",
       "requires": {
-        "@blueprintjs/core": "^4.20.2",
-        "@blueprintjs/popover2": "^1.14.11",
+        "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/icons": "^5.10.0",
         "classnames": "^2.3.1",
-        "tslib": "~2.5.0"
+        "tslib": "~2.6.2"
       }
     },
     "@cspotcode/source-map-support": {
@@ -19374,15 +19351,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "@hypnosphi/create-react-context": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
-      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
-      "requires": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      }
-    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -20379,11 +20347,6 @@
       "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==",
       "dev": true
     },
-    "@types/dom4": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@types/dom4/-/dom4-2.0.2.tgz",
-      "integrity": "sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g=="
-    },
     "@types/enzyme": {
       "version": "3.10.17",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.17.tgz",
@@ -21905,6 +21868,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -22706,9 +22670,9 @@
       }
     },
     "date-fns-tz": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
-      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA=="
     },
     "debounce": {
       "version": "1.2.1",
@@ -22759,19 +22723,6 @@
       "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
       "dev": true
     },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -22803,6 +22754,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -22921,11 +22873,6 @@
         "entities": "^1.1.1"
       }
     },
-    "dom4": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/dom4/-/dom4-2.1.6.tgz",
-      "integrity": "sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA=="
-    },
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
@@ -24312,7 +24259,8 @@
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
     },
     "gensync": {
       "version": "1.0.0-beta.2",
@@ -24330,6 +24278,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -24458,11 +24407,6 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
-    "gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -24518,6 +24462,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -24531,12 +24476,14 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -24965,6 +24912,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -25047,6 +24995,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -25142,6 +25091,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -27159,7 +27109,8 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -27787,6 +27738,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
       "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -27795,7 +27747,8 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
     },
     "object.assign": {
       "version": "4.1.4",
@@ -28136,11 +28089,6 @@
       "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
       "dev": true
     },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
-    },
     "postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -29525,6 +29473,11 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q=="
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -29611,6 +29564,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-uid": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.3.tgz",
+      "integrity": "sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "read-installed": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/read-installed/-/read-installed-4.0.3.tgz",
@@ -29752,6 +29713,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
       "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -31384,9 +31346,9 @@
       }
     },
     "tslib": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
     },
     "tsutils": {
       "version": "3.21.0",
@@ -31447,11 +31409,6 @@
         "is-typed-array": "^1.1.9"
       }
     },
-    "typed-styles": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
-      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
-    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
diff --git a/web-console/package.json b/web-console/package.json
index 6e38ba24684a..e5af117ccfc6 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -63,12 +63,12 @@
     "not ie 11"
   ],
   "dependencies": {
-    "@blueprintjs/core": "^4.20.1",
-    "@blueprintjs/datetime": "^4.4.36",
-    "@blueprintjs/datetime2": "^0.9.35",
-    "@blueprintjs/icons": "^4.16.0",
-    "@blueprintjs/popover2": "^1.14.9",
-    "@blueprintjs/select": "^4.9.24",
+    "@blueprintjs/core": "^5.10.5",
+    "@blueprintjs/datetime": "^5.3.7",
+    "@blueprintjs/datetime2": "^2.3.7",
+    "@blueprintjs/icons": "^5.10.0",
+    "@blueprintjs/popover2": "^2.1.7",
+    "@blueprintjs/select": "^5.2.1",
     "@druid-toolkit/query": "^0.22.20",
     "@druid-toolkit/visuals-core": "^0.3.3",
     "@druid-toolkit/visuals-react": "^0.3.3",
diff --git a/web-console/src/blueprint-overrides/common/_variables.scss b/web-console/src/blueprint-overrides/common/_variables.scss
index 1c3695693d0e..d3fa168cbc3d 100644
--- a/web-console/src/blueprint-overrides/common/_variables.scss
+++ b/web-console/src/blueprint-overrides/common/_variables.scss
@@ -20,7 +20,7 @@
 
 // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
 // Do not quote this value, for Less consumers.
-$ns: bp4;
+$ns: bp5;
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
diff --git a/web-console/src/components/more-button/more-button.spec.tsx b/web-console/src/components/more-button/more-button.spec.tsx
index 842f23aa52b7..dead6c262875 100644
--- a/web-console/src/components/more-button/more-button.spec.tsx
+++ b/web-console/src/components/more-button/more-button.spec.tsx
@@ -26,8 +26,8 @@ describe('MoreButton', () => {
   it('matches snapshot (full)', () => {
     const moreButton = (
       <MoreButton>
-        <MenuItem>LOL 1</MenuItem>
-        <MenuItem>LOL 2</MenuItem>
+        <MenuItem text="LOL 1" />
+        <MenuItem text="LOL 2" />
       </MoreButton>
     );
 
diff --git a/web-console/src/views/explore-view/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx b/web-console/src/views/explore-view/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
index fbbe3a6ef305..c8b9afb7b2ab 100644
--- a/web-console/src/views/explore-view/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
+++ b/web-console/src/views/explore-view/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
@@ -134,11 +134,7 @@ export const ValuesFilterControl = React.memo(function ValuesFilterControl(
               }}
             />
           ))}
-          {valuesState.loading && (
-            <MenuItem icon={IconNames.BLANK} disabled>
-              Loading...
-            </MenuItem>
-          )}
+          {valuesState.loading && <MenuItem icon={IconNames.BLANK} disabled text="Loading..." />}
         </Menu>
       </FormGroup>
       <div className="button-bar">
diff --git a/web-console/unified-console.html b/web-console/unified-console.html
index 3b59911f5ea0..d8ab16f07ebf 100644
--- a/web-console/unified-console.html
+++ b/web-console/unified-console.html
@@ -52,7 +52,7 @@
       }
     </style>
   </head>
-  <body class="bp4-dark mouse-mode">
+  <body class="bp5-dark mouse-mode">
     <div class="app-container"></div>
     <div id="browser-update" style="display: none">
       You are using an unsupported browser. The web console will not work properly.

From c4c9682330b96ee3c36a07c0b23921e15271848f Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 17 Jul 2024 13:32:20 -0700
Subject: [PATCH 03/15] update snapshots

---
 .../__snapshots__/action-cell.spec.tsx.snap   |  19 +-
 .../__snapshots__/action-icon.spec.tsx.snap   |  19 +-
 .../__snapshots__/array-input.spec.tsx.snap   |  28 +-
 .../array-mode-swtich.spec.tsx.snap           |  32 +-
 .../__snapshots__/auto-form.spec.tsx.snap     |  32 +-
 .../clearable-input.spec.tsx.snap             |  27 +-
 .../fancy-numeric-input.spec.tsx.snap         |  18 +-
 .../form-group-with-info.spec.tsx.snap        |  32 +-
 .../form-json-selector.spec.tsx.snap          |  24 +-
 .../formatted-input.spec.tsx.snap             |  10 +-
 .../__snapshots__/header-bar.spec.tsx.snap    | 206 ++----
 .../restricted-mode.spec.tsx.snap             |  56 +-
 .../interval-input.spec.tsx.snap              |  32 +-
 .../__snapshots__/json-collapse.spec.tsx.snap |  12 +-
 .../__snapshots__/menu-checkbox.spec.tsx.snap |  50 +-
 .../__snapshots__/menu-tristate.spec.tsx.snap | 164 ++---
 .../__snapshots__/more-button.spec.tsx.snap   |  36 +-
 .../__snapshots__/rule-editor.spec.tsx.snap   | 625 ++++++++----------
 .../segment-timeline.spec.tsx.snap            |  93 +--
 .../__snapshots__/show-json.spec.tsx.snap     |  14 +-
 .../__snapshots__/show-log.spec.tsx.snap      |  19 +-
 .../__snapshots__/show-value.spec.tsx.snap    |   8 +-
 .../suggestible-input.spec.tsx.snap           |  48 +-
 .../suggestion-menu.spec.tsx.snap             |  84 +--
 .../__snapshots__/table-cell.spec.tsx.snap    |  22 +-
 .../table-column-selector.spec.tsx.snap       |  28 +-
 .../__snapshots__/timed-button.spec.tsx.snap  |  39 +-
 .../warning-checklist.spec.tsx.snap           |  12 +-
 .../__snapshots__/about-dialog.spec.tsx.snap  |  65 +-
 .../__snapshots__/alert-dialog.spec.tsx.snap  |  30 +-
 .../async-action-dialog.spec.tsx.snap         |  30 +-
 .../compaction-config-dialog.spec.tsx.snap    | 444 ++++++-------
 ...tasource-table-action-dialog.spec.tsx.snap | 134 ++--
 .../__snapshots__/doctor-dialog.spec.tsx.snap |  66 +-
 .../edit-context-dialog.spec.tsx.snap         |  43 +-
 .../history-dialog.spec.tsx.snap              |  96 ++-
 .../index-spec-dialog.spec.tsx.snap           |  40 +-
 .../lookup-edit-dialog.spec.tsx.snap          |  70 +-
 .../lookup-table-action-dialog.spec.tsx.snap  | 111 ++--
 .../retention-dialog.spec.tsx.snap            | 439 +++++-------
 .../segment-table-action-dialog.spec.tsx.snap | 148 ++---
 .../show-value-dialog.spec.tsx.snap           |  66 +-
 .../__snapshots__/snitch-dialog.spec.tsx.snap | 108 ++-
 .../__snapshots__/spec-dialog.spec.tsx.snap   |  86 +--
 .../__snapshots__/status-dialog.spec.tsx.snap |  43 +-
 ...pervisor-table-action-dialog.spec.tsx.snap | 194 ++----
 .../supervisor-statistics-table.spec.tsx.snap |  30 +-
 .../table-action-dialog.spec.tsx.snap         |  64 +-
 .../task-table-action-dialog.spec.tsx.snap    | 194 ++----
 .../datasources-view.spec.tsx.snap            |  13 +-
 .../datasources-card.spec.tsx.snap            |  24 +-
 .../home-view-card.spec.tsx.snap              |  24 +-
 .../__snapshots__/lookups-card.spec.tsx.snap  |  24 +-
 .../__snapshots__/segments-card.spec.tsx.snap |  24 +-
 .../__snapshots__/services-card.spec.tsx.snap |  24 +-
 .../__snapshots__/status-card.spec.tsx.snap   |  24 +-
 .../supervisors-card.spec.tsx.snap            |  24 +-
 .../__snapshots__/tasks-card.spec.tsx.snap    |  24 +-
 .../load-data-view.spec.tsx.snap              | 152 ++---
 .../example-picker.spec.tsx.snap              |  22 +-
 .../__snapshots__/form-editor.spec.tsx.snap   |  66 +-
 .../__snapshots__/lookups-view.spec.tsx.snap  |   2 +-
 .../__snapshots__/segments-view.spec.tsx.snap |  21 +-
 .../__snapshots__/services-view.spec.tsx.snap |  23 +-
 .../supervisors-view.spec.tsx.snap            |  54 +-
 .../__snapshots__/tasks-view.spec.tsx.snap    |  34 +-
 .../__snapshots__/column-tree.spec.tsx.snap   | 157 +----
 .../complex-menu-items.spec.tsx.snap          |  99 ++-
 .../number-menu-items.spec.tsx.snap           | 589 ++++++++---------
 .../string-menu-items.spec.tsx.snap           | 589 ++++++++---------
 .../time-menu-items.spec.tsx.snap             | 589 ++++++++---------
 .../execution-error-pane.spec.tsx.snap        |   4 +-
 .../execution-progress-bar-pane.spec.tsx.snap |  10 +-
 .../execution-submit-dialog.spec.tsx.snap     |  24 +-
 .../execution-timer-panel.spec.tsx.snap       |  60 +-
 .../explain-dialog.spec.tsx.snap              | 106 +--
 .../max-tasks-button.spec.tsx.snap            |  61 +-
 .../query-parameters-dialog.spec.tsx.snap     | 232 ++-----
 78 files changed, 3012 insertions(+), 4377 deletions(-)

diff --git a/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap b/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
index a5bdd46adf17..9660d9aee97b 100644
--- a/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
+++ b/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
@@ -6,21 +6,8 @@ exports[`ActionCell matches snapshot 1`] = `
 >
   <span
     aria-hidden="true"
-    class="bp4-icon bp4-icon-search-template action-icon"
-    icon="search-template"
-  >
-    <svg
-      data-icon="search-template"
-      height="16"
-      role="img"
-      viewBox="0 0 16 16"
-      width="16"
-    >
-      <path
-        d="M15.55 13.43l-2.67-2.67c.7-1.09 1.11-2.38 1.11-3.77 0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.41 3.77-1.11l2.67 2.67a1.498 1.498 0 102.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm2.5-6h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm0-2h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm0 4h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </span>
+    class="bp5-icon bp5-icon-standard bp5-icon-search-template action-icon"
+    data-icon="search-template"
+  />
 </div>
 `;
diff --git a/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap b/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
index ee5e9f898305..d702eaf657d0 100644
--- a/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
+++ b/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
@@ -3,20 +3,7 @@
 exports[`ActionIcon matches snapshot 1`] = `
 <span
   aria-hidden="true"
-  class="bp4-icon bp4-icon-clipboard action-icon"
-  icon="clipboard"
->
-  <svg
-    data-icon="clipboard"
-    height="16"
-    role="img"
-    viewBox="0 0 16 16"
-    width="16"
-  >
-    <path
-      d="M11 2c0-.55-.45-1-1-1h.22C9.88.4 9.24 0 8.5 0S7.12.4 6.78 1H7c-.55 0-1 .45-1 1v1h5V2zm2 0h-1v2H5V2H4c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h9c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"
-      fill-rule="evenodd"
-    />
-  </svg>
-</span>
+  class="bp5-icon bp5-icon-standard bp5-icon-clipboard action-icon"
+  data-icon="clipboard"
+/>
 `;
diff --git a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
index 35dac09045af..8ff7c133a262 100644
--- a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
+++ b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
@@ -5,37 +5,25 @@ exports[`ArrayInput matches snapshot 1`] = `
   class="array-input test"
 >
   <textarea
-    class="bp4-input bp4-fill test"
+    class="bp5-input bp5-text-area bp5-fill test"
     placeholder="test"
   >
     apple, banana, pear
   </textarea>
   <span
-    aria-haspopup="true"
-    class="suggestion-button bp4-popover2-target"
+    class="bp5-popover2-target suggestion-button bp5-popover-target"
   >
     <button
-      class="bp4-button bp4-minimal"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-plus"
-        icon="plus"
-      >
-        <svg
-          data-icon="plus"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-plus"
+        data-icon="plus"
+      />
     </button>
   </span>
 </div>
diff --git a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
index 88d7564823a6..6c49cca906e5 100644
--- a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
+++ b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
@@ -2,45 +2,33 @@
 
 exports[`ArrayModeSwitch matches snapshot 1`] = `
 <div
-  class="bp4-form-group form-group-with-info"
+  class="bp5-form-group form-group-with-info"
 >
   <div
-    class="bp4-form-content"
+    class="bp5-form-content"
   >
     <label
-      class="bp4-control bp4-switch legacy-switch"
+      class="bp5-control bp5-switch legacy-switch"
     >
       <input
         checked=""
         type="checkbox"
       />
       <span
-        class="bp4-control-indicator"
+        class="bp5-control-indicator"
       />
       Store ARRAYs as MVDs
     </label>
     <span
-      aria-haspopup="true"
-      class="info-popover bp4-popover2-target"
+      class="bp5-popover2-target info-popover bp5-popover-target"
     >
       <span
+        aria-expanded="false"
+        aria-haspopup="menu"
         aria-hidden="true"
-        class="bp4-icon bp4-icon-info-sign"
-        icon="info-sign"
-      >
-        <svg
-          data-icon="info-sign"
-          height="14"
-          role="img"
-          viewBox="0 0 16 16"
-          width="14"
-        >
-          <path
-            d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-info-sign"
+        data-icon="info-sign"
+      />
     </span>
   </div>
 </div>
diff --git a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
index 5ad241db0c08..b6de25e09282 100644
--- a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
+++ b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`AutoForm matches snapshot 1`] = `
   <Memo(FormGroupWithInfo)
     label="Test size bytes"
   >
-    <Blueprint4.NumericInput
+    <Blueprint5.NumericInput
       allowNumericCharactersOnly={true}
       buttonPosition="right"
       clampValueOnBlur={false}
@@ -77,42 +77,42 @@ exports[`AutoForm matches snapshot 1`] = `
   <Memo(FormGroupWithInfo)
     label="Test boolean"
   >
-    <Blueprint4.ButtonGroup>
-      <Blueprint4.Button
+    <Blueprint5.ButtonGroup>
+      <Blueprint5.Button
         active={false}
         disabled={false}
         onClick={[Function]}
       >
         False
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         disabled={false}
         onClick={[Function]}
       >
         True
-      </Blueprint4.Button>
-    </Blueprint4.ButtonGroup>
+      </Blueprint5.Button>
+    </Blueprint5.ButtonGroup>
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
     label="Test boolean with default"
   >
-    <Blueprint4.ButtonGroup>
-      <Blueprint4.Button
+    <Blueprint5.ButtonGroup>
+      <Blueprint5.Button
         active={true}
         disabled={false}
         onClick={[Function]}
       >
         False
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         disabled={false}
         onClick={[Function]}
       >
         True
-      </Blueprint4.Button>
-    </Blueprint4.ButtonGroup>
+      </Blueprint5.Button>
+    </Blueprint5.ButtonGroup>
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
     label="Test string array"
@@ -160,14 +160,14 @@ exports[`AutoForm matches snapshot 1`] = `
       value=""
     />
   </Memo(FormGroupWithInfo)>
-  <Blueprint4.FormGroup>
-    <Blueprint4.Button
+  <Blueprint5.FormGroup>
+    <Blueprint5.Button
       fill={true}
       minimal={true}
       onClick={[Function]}
       rightIcon="chevron-down"
       text="Show more"
     />
-  </Blueprint4.FormGroup>
+  </Blueprint5.FormGroup>
 </div>
 `;
diff --git a/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap b/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
index 29371de3d833..6b438f1d9e07 100644
--- a/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
+++ b/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
@@ -2,40 +2,27 @@
 
 exports[`ClearableInput matches snapshot 1`] = `
 <div
-  class="bp4-input-group clearable-input testClassName"
+  class="bp5-input-group clearable-input testClassName"
 >
   <input
-    class="bp4-input"
+    class="bp5-input"
     placeholder="testPlaceholder"
     style="padding-right: 0px;"
     type="text"
     value="testValue"
   />
   <span
-    class="bp4-input-action"
+    class="bp5-input-action"
   >
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-cross"
-        icon="cross"
-      >
-        <svg
-          data-icon="cross"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-cross"
+        data-icon="cross"
+      />
     </button>
   </span>
 </div>
diff --git a/web-console/src/components/fancy-numeric-input/__snapshots__/fancy-numeric-input.spec.tsx.snap b/web-console/src/components/fancy-numeric-input/__snapshots__/fancy-numeric-input.spec.tsx.snap
index c82556dbc6c4..a3df792b8235 100644
--- a/web-console/src/components/fancy-numeric-input/__snapshots__/fancy-numeric-input.spec.tsx.snap
+++ b/web-console/src/components/fancy-numeric-input/__snapshots__/fancy-numeric-input.spec.tsx.snap
@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FancyNumericInput matches snapshot 1`] = `
-<Blueprint4.ControlGroup
-  className="fancy-numeric-input bp4-numeric-input"
+<Blueprint5.ControlGroup
+  className="fancy-numeric-input bp5-numeric-input"
 >
-  <Blueprint4.InputGroup
+  <Blueprint5.InputGroup
     autoComplete="off"
     onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
     value="5"
   />
-  <Blueprint4.ButtonGroup
-    className="bp4-fixed"
+  <Blueprint5.ButtonGroup
+    className="bp5-fixed"
     vertical={true}
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       aria-label="increment"
       disabled={false}
       icon="chevron-up"
       onMouseDown={[Function]}
     />
-    <Blueprint4.Button
+    <Blueprint5.Button
       aria-label="decrement"
       disabled={false}
       icon="chevron-down"
       onMouseDown={[Function]}
     />
-  </Blueprint4.ButtonGroup>
-</Blueprint4.ControlGroup>
+  </Blueprint5.ButtonGroup>
+</Blueprint5.ControlGroup>
 `;
diff --git a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
index 5df6b188f462..30431b55af4d 100644
--- a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
+++ b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -2,43 +2,31 @@
 
 exports[`FormGroupWithInfo matches snapshot 1`] = `
 <div
-  class="bp4-form-group form-group-with-info"
+  class="bp5-form-group form-group-with-info"
 >
   <label
-    class="bp4-label"
+    class="bp5-label"
   >
     Goodies
      
     <span
-      class="bp4-text-muted"
+      class="bp5-text-muted"
     >
       <span
-        aria-haspopup="true"
-        class="info-popover bp4-popover2-target"
+        class="bp5-popover2-target info-popover bp5-popover-target"
       >
         <span
+          aria-expanded="false"
+          aria-haspopup="menu"
           aria-hidden="true"
-          class="bp4-icon bp4-icon-info-sign"
-          icon="info-sign"
-        >
-          <svg
-            data-icon="info-sign"
-            height="14"
-            role="img"
-            viewBox="0 0 16 16"
-            width="14"
-          >
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
+          class="bp5-icon bp5-icon-info-sign"
+          data-icon="info-sign"
+        />
       </span>
     </span>
   </label>
   <div
-    class="bp4-form-content"
+    class="bp5-form-content"
   >
     Some buttons and stuff
   </div>
diff --git a/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap b/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap
index 7c5a6058592f..ce3a3d29b30c 100644
--- a/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap
+++ b/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap
@@ -1,43 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormJsonSelector matches snapshot form json 1`] = `
-<Blueprint4.FormGroup
+<Blueprint5.FormGroup
   className="form-json-selector"
 >
-  <Blueprint4.ButtonGroup
+  <Blueprint5.ButtonGroup
     fill={true}
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       active={false}
       onClick={[Function]}
       text="Form"
     />
-    <Blueprint4.Button
+    <Blueprint5.Button
       active={true}
       onClick={[Function]}
       text="JSON"
     />
-  </Blueprint4.ButtonGroup>
-</Blueprint4.FormGroup>
+  </Blueprint5.ButtonGroup>
+</Blueprint5.FormGroup>
 `;
 
 exports[`FormJsonSelector matches snapshot form tab 1`] = `
-<Blueprint4.FormGroup
+<Blueprint5.FormGroup
   className="form-json-selector"
 >
-  <Blueprint4.ButtonGroup
+  <Blueprint5.ButtonGroup
     fill={true}
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       active={true}
       onClick={[Function]}
       text="Form"
     />
-    <Blueprint4.Button
+    <Blueprint5.Button
       active={false}
       onClick={[Function]}
       text="JSON"
     />
-  </Blueprint4.ButtonGroup>
-</Blueprint4.FormGroup>
+  </Blueprint5.ButtonGroup>
+</Blueprint5.FormGroup>
 `;
diff --git a/web-console/src/components/formatted-input/__snapshots__/formatted-input.spec.tsx.snap b/web-console/src/components/formatted-input/__snapshots__/formatted-input.spec.tsx.snap
index 4a21caf857a8..00a426f592d4 100644
--- a/web-console/src/components/formatted-input/__snapshots__/formatted-input.spec.tsx.snap
+++ b/web-console/src/components/formatted-input/__snapshots__/formatted-input.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`FormattedInput matches snapshot on undefined value 1`] = `
   class="formatted-input"
 >
   <div
-    class="bp4-input-group"
+    class="bp5-input-group"
   >
     <input
-      class="bp4-input"
+      class="bp5-input"
       type="text"
       value=""
     />
@@ -21,10 +21,10 @@ exports[`FormattedInput matches snapshot with escaped value 1`] = `
   class="formatted-input"
 >
   <div
-    class="bp4-input-group"
+    class="bp5-input-group"
   >
     <input
-      class="bp4-input"
+      class="bp5-input"
       type="text"
       value="Here are some chars \\t\\r\\n lol"
     />
@@ -37,7 +37,7 @@ exports[`FormattedInput matches works with multiline 1`] = `
   class="formatted-input"
 >
   <textarea
-    class="bp4-input"
+    class="bp5-input bp5-text-area"
   >
     Here are some chars \\t\\r\\n lol
   </textarea>
diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index a189bf5f9546..f596f646b921 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderBar matches snapshot 1`] = `
-<Blueprint4.Navbar
+<Blueprint5.Navbar
   className="header-bar"
 >
-  <Blueprint4.NavbarGroup
+  <Blueprint5.NavbarGroup
     align="left"
   >
     <a
@@ -12,8 +12,8 @@ exports[`HeaderBar matches snapshot 1`] = `
     >
       <Memo(DruidLogo) />
     </a>
-    <Blueprint4.NavbarDivider />
-    <Blueprint4.AnchorButton
+    <Blueprint5.NavbarDivider />
+    <Blueprint5.AnchorButton
       active={true}
       className="header-entry"
       disabled={false}
@@ -22,12 +22,10 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Query"
     />
-    <Blueprint4.Popover2
-      boundary="clippingParents"
-      captureDismiss={false}
+    <Popover2
       content={
-        <Blueprint4.Menu>
-          <Blueprint4.MenuItem
+        <Blueprint5.Menu>
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="#streaming-data-loader"
@@ -38,17 +36,22 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Streaming"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="#sql-data-loader"
             icon="clean"
             labelElement={
-              <Blueprint4.Tag
+              <Blueprint5.Tag
+                active={false}
+                fill={false}
+                interactive={false}
+                large={false}
                 minimal={true}
+                round={false}
               >
                 multi-stage-query
-              </Blueprint4.Tag>
+              </Blueprint5.Tag>
             }
             multiline={false}
             popoverProps={{}}
@@ -56,7 +59,7 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Batch - SQL"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="#classic-batch-data-loader"
@@ -67,27 +70,12 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Batch - classic"
           />
-        </Blueprint4.Menu>
+        </Blueprint5.Menu>
       }
-      defaultIsOpen={false}
       disabled={false}
-      fill={false}
-      hasBackdrop={false}
-      hoverCloseDelay={300}
-      hoverOpenDelay={150}
-      inheritDarkTheme={true}
-      interactionKind="click"
-      matchTargetWidth={false}
-      minimal={false}
-      openOnTargetFocus={true}
       position="bottom-left"
-      positioningStrategy="absolute"
-      shouldReturnFocusOnClose={false}
-      targetTagName="span"
-      transitionDuration={300}
-      usePortal={true}
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         active={false}
         className="header-entry"
         disabled={false}
@@ -95,9 +83,9 @@ exports[`HeaderBar matches snapshot 1`] = `
         minimal={true}
         text="Load data"
       />
-    </Blueprint4.Popover2>
-    <Blueprint4.NavbarDivider />
-    <Blueprint4.AnchorButton
+    </Popover2>
+    <Blueprint5.NavbarDivider />
+    <Blueprint5.AnchorButton
       active={false}
       className="header-entry"
       disabled={false}
@@ -106,7 +94,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Datasources"
     />
-    <Blueprint4.AnchorButton
+    <Blueprint5.AnchorButton
       active={false}
       className="header-entry"
       disabled={false}
@@ -115,7 +103,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Supervisors"
     />
-    <Blueprint4.AnchorButton
+    <Blueprint5.AnchorButton
       active={false}
       className="header-entry"
       disabled={false}
@@ -124,7 +112,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Tasks"
     />
-    <Blueprint4.AnchorButton
+    <Blueprint5.AnchorButton
       active={false}
       className="header-entry"
       disabled={false}
@@ -133,7 +121,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Segments"
     />
-    <Blueprint4.AnchorButton
+    <Blueprint5.AnchorButton
       active={false}
       className="header-entry"
       disabled={false}
@@ -142,12 +130,10 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Services"
     />
-    <Blueprint4.Popover2
-      boundary="clippingParents"
-      captureDismiss={false}
+    <Popover2
       content={
-        <Blueprint4.Menu>
-          <Blueprint4.MenuItem
+        <Blueprint5.Menu>
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="#lookups"
@@ -158,8 +144,8 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Lookups"
           />
-          <Blueprint4.MenuDivider />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuDivider />
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="#explore"
@@ -171,35 +157,19 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Explore"
           />
-        </Blueprint4.Menu>
+        </Blueprint5.Menu>
       }
-      defaultIsOpen={false}
-      disabled={false}
-      fill={false}
-      hasBackdrop={false}
-      hoverCloseDelay={300}
-      hoverOpenDelay={150}
-      inheritDarkTheme={true}
-      interactionKind="click"
-      matchTargetWidth={false}
-      minimal={false}
-      openOnTargetFocus={true}
       position="bottom-left"
-      positioningStrategy="absolute"
-      shouldReturnFocusOnClose={false}
-      targetTagName="span"
-      transitionDuration={300}
-      usePortal={true}
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         active={false}
         className="header-entry"
         icon="more"
         minimal={true}
       />
-    </Blueprint4.Popover2>
-  </Blueprint4.NavbarGroup>
-  <Blueprint4.NavbarGroup
+    </Popover2>
+  </Blueprint5.NavbarGroup>
+  <Blueprint5.NavbarGroup
     align="right"
   >
     <Memo(RestrictedMode)
@@ -214,223 +184,173 @@ exports[`HeaderBar matches snapshot 1`] = `
       }
       onUnrestrict={[Function]}
     />
-    <Blueprint4.Popover2
-      boundary="clippingParents"
-      captureDismiss={false}
+    <Popover2
       content={
-        <Blueprint4.Menu>
-          <Blueprint4.MenuItem
+        <Blueprint5.Menu>
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="pulse"
             multiline={false}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="Druid Doctor"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="settings"
             multiline={false}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="Coordinator dynamic config"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="wrench"
             multiline={false}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="Overlord dynamic config"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="compressed"
             multiline={false}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="Compaction dynamic config"
           />
-          <Blueprint4.MenuDivider />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuDivider />
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="high-priority"
             multiline={false}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="Capabilty detection"
           >
-            <Blueprint4.MenuItem
+            <Blueprint5.MenuItem
               active={false}
               disabled={false}
               multiline={false}
               onClick={[Function]}
               popoverProps={{}}
-              selected={false}
               shouldDismissPopover={true}
               text="Manually set Coordinator/Overlord mode"
             />
-            <Blueprint4.MenuItem
+            <Blueprint5.MenuItem
               active={false}
               disabled={false}
               multiline={false}
               onClick={[Function]}
               popoverProps={{}}
-              selected={false}
               shouldDismissPopover={true}
               text="Manually set Coordinator mode"
             />
-            <Blueprint4.MenuItem
+            <Blueprint5.MenuItem
               active={false}
               disabled={false}
               multiline={false}
               onClick={[Function]}
               popoverProps={{}}
-              selected={false}
               shouldDismissPopover={true}
               text="Manually set Overlord mode"
             />
-            <Blueprint4.MenuItem
+            <Blueprint5.MenuItem
               active={false}
               disabled={false}
               multiline={false}
               onClick={[Function]}
               popoverProps={{}}
-              selected={false}
               shouldDismissPopover={true}
               text="Manually set Router with no management proxy mode"
             />
-          </Blueprint4.MenuItem>
-        </Blueprint4.Menu>
+          </Blueprint5.MenuItem>
+        </Blueprint5.Menu>
       }
-      defaultIsOpen={false}
-      disabled={false}
-      fill={false}
-      hasBackdrop={false}
-      hoverCloseDelay={300}
-      hoverOpenDelay={150}
-      inheritDarkTheme={true}
-      interactionKind="click"
-      matchTargetWidth={false}
-      minimal={false}
-      openOnTargetFocus={true}
       position="bottom-right"
-      positioningStrategy="absolute"
-      shouldReturnFocusOnClose={false}
-      targetTagName="span"
-      transitionDuration={300}
-      usePortal={true}
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="header-entry"
         icon="cog"
         minimal={true}
       />
-    </Blueprint4.Popover2>
-    <Blueprint4.Popover2
-      boundary="clippingParents"
-      captureDismiss={false}
+    </Popover2>
+    <Popover2
       content={
-        <Blueprint4.Menu>
-          <Blueprint4.MenuItem
+        <Blueprint5.Menu>
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="graph"
             multiline={false}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             text="About"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="https://druid.apache.org/docs/latest"
             icon="th"
             multiline={false}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             target="_blank"
             text="Docs"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="https://groups.google.com/forum/#!forum/druid-user"
             icon="user"
             multiline={false}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             target="_blank"
             text="User group"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="https://druid.apache.org/community/join-slack"
             icon="chat"
             multiline={false}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             target="_blank"
             text="Slack channel"
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             href="https://github.com/apache/druid"
             icon="git-branch"
             multiline={false}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={true}
             target="_blank"
             text="GitHub"
           />
-        </Blueprint4.Menu>
+        </Blueprint5.Menu>
       }
-      defaultIsOpen={false}
-      disabled={false}
-      fill={false}
-      hasBackdrop={false}
-      hoverCloseDelay={300}
-      hoverOpenDelay={150}
-      inheritDarkTheme={true}
-      interactionKind="click"
-      matchTargetWidth={false}
-      minimal={false}
-      openOnTargetFocus={true}
       position="bottom-right"
-      positioningStrategy="absolute"
-      shouldReturnFocusOnClose={false}
-      targetTagName="span"
-      transitionDuration={300}
-      usePortal={true}
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="header-entry"
         icon="help"
         minimal={true}
       />
-    </Blueprint4.Popover2>
-  </Blueprint4.NavbarGroup>
-</Blueprint4.Navbar>
+    </Popover2>
+  </Blueprint5.NavbarGroup>
+</Blueprint5.Navbar>
 `;
diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index 8a2e325815d8..e2e38497e50d 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RestrictedMode matches snapshot when in auto capability detection mode 1`] = `
-<Blueprint4.Popover2
-  boundary="clippingParents"
-  captureDismiss={false}
+<Popover2
   className="restricted-mode"
   content={
     <Memo(PopoverText)>
@@ -28,7 +26,7 @@ exports[`RestrictedMode matches snapshot when in auto capability detection mode
           It is possible that the console is experiencing an issue with the capability detection. You can enable the unrestricted console, but certain features might not work if the underlying APIs are not available.
         </p>
         <p>
-          <Blueprint4.Button
+          <Blueprint5.Button
             icon="warning-sign"
             onClick={[Function]}
             text="Temporarily unrestrict console (with SQL)"
@@ -36,7 +34,7 @@ exports[`RestrictedMode matches snapshot when in auto capability detection mode
         </p>
       </React.Fragment>
       <p>
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="warning-sign"
           onClick={[Function]}
           text="Temporarily unrestrict console (without SQL)"
@@ -44,37 +42,19 @@ exports[`RestrictedMode matches snapshot when in auto capability detection mode
       </p>
     </Memo(PopoverText)>
   }
-  defaultIsOpen={false}
-  disabled={false}
-  fill={false}
-  hasBackdrop={false}
-  hoverCloseDelay={300}
-  hoverOpenDelay={150}
-  inheritDarkTheme={true}
-  interactionKind="click"
-  matchTargetWidth={false}
-  minimal={false}
-  openOnTargetFocus={true}
   position="bottom-right"
-  positioningStrategy="absolute"
-  shouldReturnFocusOnClose={false}
-  targetTagName="span"
-  transitionDuration={300}
-  usePortal={true}
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     icon="warning-sign"
     intent="warning"
     minimal={true}
     text="Coordinator/Overlord mode"
   />
-</Blueprint4.Popover2>
+</Popover2>
 `;
 
 exports[`RestrictedMode matches snapshot when in manual capability detection mode 1`] = `
-<Blueprint4.Popover2
-  boundary="clippingParents"
-  captureDismiss={false}
+<Popover2
   className="restricted-mode"
   content={
     <Memo(PopoverText)>
@@ -99,7 +79,7 @@ exports[`RestrictedMode matches snapshot when in manual capability detection mod
           The console did no perform its automatic capability detection because it is running in manual capability detection mode.
         </p>
         <p>
-          <Blueprint4.Button
+          <Blueprint5.Button
             intent="primary"
             onClick={[Function]}
             text="Use to automatic capability detection"
@@ -107,7 +87,7 @@ exports[`RestrictedMode matches snapshot when in manual capability detection mod
         </p>
       </React.Fragment>
       <p>
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="warning-sign"
           onClick={[Function]}
           text="Temporarily unrestrict console (without SQL)"
@@ -115,29 +95,13 @@ exports[`RestrictedMode matches snapshot when in manual capability detection mod
       </p>
     </Memo(PopoverText)>
   }
-  defaultIsOpen={false}
-  disabled={false}
-  fill={false}
-  hasBackdrop={false}
-  hoverCloseDelay={300}
-  hoverOpenDelay={150}
-  inheritDarkTheme={true}
-  interactionKind="click"
-  matchTargetWidth={false}
-  minimal={false}
-  openOnTargetFocus={true}
   position="bottom-right"
-  positioningStrategy="absolute"
-  shouldReturnFocusOnClose={false}
-  targetTagName="span"
-  transitionDuration={300}
-  usePortal={true}
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     icon="warning-sign"
     intent="warning"
     minimal={true}
     text="Coordinator/Overlord mode"
   />
-</Blueprint4.Popover2>
+</Popover2>
 `;
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index e575162ad359..116ecef1bcd8 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -2,45 +2,33 @@
 
 exports[`IntervalInput matches snapshot 1`] = `
 <div
-  class="bp4-input-group bp4-intent-primary"
+  class="bp5-input-group bp5-intent-primary"
 >
   <input
-    class="bp4-input"
+    class="bp5-input"
     placeholder="2010-01-01/2020-01-01"
     style="padding-right: 0px;"
     type="text"
     value="2010-01-01/2020-01-01"
   />
   <span
-    class="bp4-input-action"
+    class="bp5-input-action"
   >
     <div>
       <span
-        aria-haspopup="true"
-        class="bp4-popover2-target"
+        class="bp5-popover2-target bp5-popover-target"
       >
         <button
-          class="bp4-button"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          class="bp5-button"
           type="button"
         >
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-calendar"
-            icon="calendar"
-          >
-            <svg
-              data-icon="calendar"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+            class="bp5-icon bp5-icon-standard bp5-icon-calendar"
+            data-icon="calendar"
+          />
         </button>
       </span>
     </div>
diff --git a/web-console/src/components/json-collapse/__snapshots__/json-collapse.spec.tsx.snap b/web-console/src/components/json-collapse/__snapshots__/json-collapse.spec.tsx.snap
index af93e1e399b4..e48d2470a3b9 100644
--- a/web-console/src/components/json-collapse/__snapshots__/json-collapse.spec.tsx.snap
+++ b/web-console/src/components/json-collapse/__snapshots__/json-collapse.spec.tsx.snap
@@ -7,25 +7,29 @@ exports[`JsonCollapse matches snapshot 1`] = `
   <div
     className="collapse-buttons"
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       active={false}
       minimal={true}
       onClick={[Function]}
       text="test"
     />
   </div>
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={false}
     keepChildrenMounted={false}
     transitionDuration={200}
   >
-    <Blueprint4.TextArea
+    <Blueprint5.TextArea
+      autoResize={false}
+      fill={false}
+      large={false}
       readOnly={true}
+      small={false}
       value="{
   "name": "test"
 }"
     />
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
diff --git a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
index e8f9236e8dc0..7ed6b8c73114 100644
--- a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
+++ b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
@@ -6,35 +6,22 @@ exports[`MenuCheckbox matches snapshot checked 1`] = `
   role="none"
 >
   <a
-    class="bp4-menu-item menu-checkbox"
+    class="bp5-menu-item menu-checkbox"
     role="menuitem"
     tabindex="0"
   >
     <span
-      class="bp4-menu-item-icon"
+      class="bp5-menu-item-icon"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-tick-circle"
-        icon="tick-circle"
+        class="bp5-icon bp5-icon-standard bp5-icon-tick-circle"
+        data-icon="tick-circle"
         tabindex="-1"
-      >
-        <svg
-          data-icon="tick-circle"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8 16c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4-11c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+      />
     </span>
     <div
-      class="bp4-fill bp4-text-overflow-ellipsis"
+      class="bp5-text-overflow-ellipsis bp5-fill"
     >
       hello
     </div>
@@ -48,35 +35,22 @@ exports[`MenuCheckbox matches snapshot unchecked 1`] = `
   role="none"
 >
   <a
-    class="bp4-menu-item menu-checkbox"
+    class="bp5-menu-item menu-checkbox"
     role="menuitem"
     tabindex="0"
   >
     <span
-      class="bp4-menu-item-icon"
+      class="bp5-menu-item-icon"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-circle"
-        icon="circle"
+        class="bp5-icon bp5-icon-standard bp5-icon-circle"
+        data-icon="circle"
         tabindex="-1"
-      >
-        <svg
-          data-icon="circle"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+      />
     </span>
     <div
-      class="bp4-fill bp4-text-overflow-ellipsis"
+      class="bp5-text-overflow-ellipsis bp5-fill"
     >
       hello
     </div>
diff --git a/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap b/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap
index 3b3fc9518633..d5a0f0c2e262 100644
--- a/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap
+++ b/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap
@@ -2,108 +2,108 @@
 
 exports[`MenuTristate matches snapshot false 1`] = `
 <li
-  class="bp4-submenu"
+  class="bp5-submenu"
   role="none"
 >
   <span
-    class="bp4-popover-wrapper"
+    class="bp5-popover-target"
+    role="menuitem"
+    tabindex="0"
   >
-    <span
-      aria-haspopup="true"
-      class="bp4-popover-target"
-      role="menuitem"
-      tabindex="0"
+    <a
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="bp5-menu-item menu-tristate"
+      label="false"
+      role="none"
+      tabindex="-1"
     >
-      <a
-        class="bp4-menu-item menu-tristate"
-        label="false"
-        role="none"
-        tabindex="-1"
+      <div
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
-        <div
-          class="bp4-fill bp4-text-overflow-ellipsis"
-        >
-          hello
-        </div>
-        <span
-          class="bp4-menu-item-label"
-        >
-          false
-        </span>
-        <span
-          aria-hidden="true"
-          class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-          icon="caret-right"
+        hello
+      </div>
+      <span
+        class="bp5-menu-item-label"
+      >
+        false
+      </span>
+      <span
+        class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+      >
+        <svg
+          data-icon="caret-right"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            data-icon="caret-right"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </a>
-    </span>
+          <title>
+            Open sub menu
+          </title>
+          <path
+            d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+            fill-rule="evenodd"
+            style="transform-origin: center;"
+            transform="scale(0.05, -0.05) translate(-160, -160)"
+          />
+        </svg>
+      </span>
+    </a>
   </span>
 </li>
 `;
 
 exports[`MenuTristate matches snapshot undefined 1`] = `
 <li
-  class="bp4-submenu"
+  class="bp5-submenu"
   role="none"
 >
   <span
-    class="bp4-popover-wrapper"
+    class="bp5-popover-target"
+    role="menuitem"
+    tabindex="0"
   >
-    <span
-      aria-haspopup="true"
-      class="bp4-popover-target"
-      role="menuitem"
-      tabindex="0"
+    <a
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="bp5-menu-item menu-tristate"
+      label="auto (true)"
+      role="none"
+      tabindex="-1"
     >
-      <a
-        class="bp4-menu-item menu-tristate"
-        label="auto (true)"
-        role="none"
-        tabindex="-1"
+      <div
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
-        <div
-          class="bp4-fill bp4-text-overflow-ellipsis"
-        >
-          hello
-        </div>
-        <span
-          class="bp4-menu-item-label"
-        >
-          auto (true)
-        </span>
-        <span
-          aria-hidden="true"
-          class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-          icon="caret-right"
+        hello
+      </div>
+      <span
+        class="bp5-menu-item-label"
+      >
+        auto (true)
+      </span>
+      <span
+        class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+      >
+        <svg
+          data-icon="caret-right"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            data-icon="caret-right"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </a>
-    </span>
+          <title>
+            Open sub menu
+          </title>
+          <path
+            d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+            fill-rule="evenodd"
+            style="transform-origin: center;"
+            transform="scale(0.05, -0.05) translate(-160, -160)"
+          />
+        </svg>
+      </span>
+    </a>
   </span>
 </li>
 `;
diff --git a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
index 344cb4a49f53..bec7c00f0fc5 100644
--- a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
+++ b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
@@ -2,11 +2,12 @@
 
 exports[`MoreButton matches snapshot (empty) 1`] = `
 <span
-  aria-haspopup="true"
-  class="more-button bp4-popover2-target"
+  class="bp5-popover2-target more-button bp5-popover-target"
 >
   <button
-    class="bp4-button bp4-disabled"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="bp5-button bp5-disabled"
     disabled=""
     tabindex="-1"
     title="More actions"
@@ -14,8 +15,7 @@ exports[`MoreButton matches snapshot (empty) 1`] = `
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-more"
-      icon="more"
+      class="bp5-icon bp5-icon-more"
     >
       <svg
         data-icon="more"
@@ -36,32 +36,20 @@ exports[`MoreButton matches snapshot (empty) 1`] = `
 
 exports[`MoreButton matches snapshot (full) 1`] = `
 <span
-  aria-haspopup="true"
-  class="more-button bp4-popover2-target"
+  class="bp5-popover2-target more-button bp5-popover-target"
 >
   <button
-    class="bp4-button"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="bp5-button"
     title="More actions"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-more"
-      icon="more"
-    >
-      <svg
-        data-icon="more"
-        height="16"
-        role="img"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
+      class="bp5-icon bp5-icon-standard bp5-icon-more"
+      data-icon="more"
+    />
   </button>
 </span>
 `;
diff --git a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
index d6892f3c1b39..507f156e3270 100644
--- a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
+++ b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
@@ -8,83 +8,58 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
     class="title"
   >
     <button
-      class="bp4-button bp4-minimal left"
+      class="bp5-button bp5-minimal left"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         loadForever(1x)
       </span>
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-caret-down"
-        icon="caret-down"
-      >
-        <svg
-          data-icon="caret-down"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+        data-icon="caret-down"
+      />
     </button>
     <div
       class="spacer"
     />
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
-      >
-        <svg
-          data-icon="trash"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-trash"
+        data-icon="trash"
+      />
     </button>
   </div>
   <div
-    class="bp4-collapse"
+    class="bp5-collapse"
     style="height: auto; overflow-y: visible; transition: none;"
   >
     <div
       aria-hidden="false"
-      class="bp4-collapse-body"
+      class="bp5-collapse-body"
       style="transform: translateY(0); transition: none;"
     >
       <div
-        class="bp4-card bp4-elevation-2"
+        class="bp5-card bp5-elevation-2"
       >
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <div
-                class="bp4-html-select"
+                class="bp5-html-select"
               >
                 <select>
                   <option
@@ -139,25 +114,23 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-2"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-2"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
@@ -166,27 +139,28 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Tier:
                 </span>
               </button>
               <div
-                class="bp4-html-select bp4-fill"
+                class="bp5-html-select bp5-fill"
               >
                 <select>
                   <option
@@ -206,52 +180,52 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-3"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-3"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Replicants:
                 </span>
               </button>
               <div
-                class="bp4-control-group bp4-numeric-input"
+                class="bp5-control-group bp5-numeric-input"
+                role="group"
               >
                 <div
-                  class="bp4-input-group"
+                  class="bp5-input-group"
                 >
                   <input
+                    aria-disabled="false"
                     aria-valuemax="256"
                     aria-valuemin="0"
                     aria-valuenow="1"
                     autocomplete="off"
-                    class="bp4-input"
+                    class="bp5-input"
                     id="numericInput-0"
                     max="256"
                     min="0"
@@ -261,18 +235,17 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                   />
                 </div>
                 <div
-                  class="bp4-button-group bp4-vertical bp4-fixed"
+                  class="bp5-button-group bp5-vertical bp5-fixed"
                 >
                   <button
                     aria-controls="numericInput-0"
                     aria-label="increment"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-up"
-                      icon="chevron-up"
+                      class="bp5-icon bp5-icon-chevron-up"
                     >
                       <svg
                         data-icon="chevron-up"
@@ -282,8 +255,10 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                          d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -291,13 +266,12 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                   <button
                     aria-controls="numericInput-0"
                     aria-label="decrement"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-down"
-                      icon="chevron-down"
+                      class="bp5-icon bp5-icon-chevron-down"
                     >
                       <svg
                         data-icon="chevron-down"
@@ -307,8 +281,10 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                          d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -316,62 +292,36 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
                 </div>
               </div>
               <button
-                class="bp4-button"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-trash"
-                  icon="trash"
-                >
-                  <svg
-                    data-icon="trash"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-trash"
+                  data-icon="trash"
+                />
               </button>
             </div>
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
               title=""
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-plus"
-                icon="plus"
-              >
-                <svg
-                  data-icon="plus"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-plus"
+                data-icon="plus"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Add historical tier replication
               </span>
@@ -392,18 +342,17 @@ exports[`RuleEditor matches snapshot with broadcast rule 1`] = `
     class="title"
   >
     <button
-      class="bp4-button bp4-minimal left"
+      class="bp5-button bp5-minimal left"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         broadcastByInterval(2010-01-01/2015-01-01)
       </span>
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-caret-down"
-        icon="caret-down"
+        class="bp5-icon bp5-icon-caret-down"
       >
         <svg
           data-icon="caret-down"
@@ -423,13 +372,12 @@ exports[`RuleEditor matches snapshot with broadcast rule 1`] = `
       class="spacer"
     />
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
+        class="bp5-icon bp5-icon-trash"
       >
         <svg
           data-icon="trash"
@@ -447,28 +395,29 @@ exports[`RuleEditor matches snapshot with broadcast rule 1`] = `
     </button>
   </div>
   <div
-    class="bp4-collapse"
+    class="bp5-collapse"
     style="height: auto; overflow-y: visible; transition: none;"
   >
     <div
       aria-hidden="false"
-      class="bp4-collapse-body"
+      class="bp5-collapse-body"
       style="transform: translateY(0); transition: none;"
     >
       <div
-        class="bp4-card bp4-elevation-2"
+        class="bp5-card bp5-elevation-2"
       >
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <div
-                class="bp4-html-select"
+                class="bp5-html-select"
               >
                 <select>
                   <option
@@ -523,34 +472,32 @@ exports[`RuleEditor matches snapshot with broadcast rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-38"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-38"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <input
-                  class="bp4-input"
+                  class="bp5-input"
                   placeholder="2010-01-01/2020-01-01"
                   type="text"
                   value="2010-01-01/2015-01-01"
@@ -573,18 +520,17 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
     class="title"
   >
     <button
-      class="bp4-button bp4-minimal left"
+      class="bp5-button bp5-minimal left"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         loadByInterval(2010-01-01/2015-01-01, 3x)
       </span>
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-caret-down"
-        icon="caret-down"
+        class="bp5-icon bp5-icon-caret-down"
       >
         <svg
           data-icon="caret-down"
@@ -604,13 +550,12 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
       class="spacer"
     />
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
+        class="bp5-icon bp5-icon-trash"
       >
         <svg
           data-icon="trash"
@@ -628,28 +573,29 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
     </button>
   </div>
   <div
-    class="bp4-collapse"
+    class="bp5-collapse"
     style="height: auto; overflow-y: visible; transition: none;"
   >
     <div
       aria-hidden="false"
-      class="bp4-collapse-body"
+      class="bp5-collapse-body"
       style="transform: translateY(0); transition: none;"
     >
       <div
-        class="bp4-card bp4-elevation-2"
+        class="bp5-card bp5-elevation-2"
       >
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <div
-                class="bp4-html-select"
+                class="bp5-html-select"
               >
                 <select>
                   <option
@@ -704,34 +650,32 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-26"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-26"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <input
-                  class="bp4-input"
+                  class="bp5-input"
                   placeholder="2010-01-01/2020-01-01"
                   type="text"
                   value="2010-01-01/2015-01-01"
@@ -741,27 +685,28 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Tier:
                 </span>
               </button>
               <div
-                class="bp4-html-select bp4-fill"
+                class="bp5-html-select bp5-fill"
               >
                 <select>
                   <option
@@ -781,52 +726,52 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-27"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-27"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Replicants:
                 </span>
               </button>
               <div
-                class="bp4-control-group bp4-numeric-input"
+                class="bp5-control-group bp5-numeric-input"
+                role="group"
               >
                 <div
-                  class="bp4-input-group"
+                  class="bp5-input-group"
                 >
                   <input
+                    aria-disabled="false"
                     aria-valuemax="256"
                     aria-valuemin="0"
                     aria-valuenow="2"
                     autocomplete="off"
-                    class="bp4-input"
+                    class="bp5-input"
                     id="numericInput-3"
                     max="256"
                     min="0"
@@ -836,18 +781,17 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   />
                 </div>
                 <div
-                  class="bp4-button-group bp4-vertical bp4-fixed"
+                  class="bp5-button-group bp5-vertical bp5-fixed"
                 >
                   <button
                     aria-controls="numericInput-3"
                     aria-label="increment"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-up"
-                      icon="chevron-up"
+                      class="bp5-icon bp5-icon-chevron-up"
                     >
                       <svg
                         data-icon="chevron-up"
@@ -857,8 +801,10 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                         width="16"
                       >
                         <path
-                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                          d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -866,13 +812,12 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   <button
                     aria-controls="numericInput-3"
                     aria-label="decrement"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-down"
-                      icon="chevron-down"
+                      class="bp5-icon bp5-icon-chevron-down"
                     >
                       <svg
                         data-icon="chevron-down"
@@ -882,8 +827,10 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                         width="16"
                       >
                         <path
-                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                          d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -891,13 +838,12 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                 </div>
               </div>
               <button
-                class="bp4-button"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-trash"
-                  icon="trash"
+                  class="bp5-icon bp5-icon-trash"
                 >
                   <svg
                     data-icon="trash"
@@ -915,21 +861,22 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
               </button>
             </div>
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Tier:
                 </span>
               </button>
               <div
-                class="bp4-html-select bp4-fill"
+                class="bp5-html-select bp5-fill"
               >
                 <select>
                   <option
@@ -949,52 +896,52 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-31"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-31"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Replicants:
                 </span>
               </button>
               <div
-                class="bp4-control-group bp4-numeric-input"
+                class="bp5-control-group bp5-numeric-input"
+                role="group"
               >
                 <div
-                  class="bp4-input-group"
+                  class="bp5-input-group"
                 >
                   <input
+                    aria-disabled="false"
                     aria-valuemax="256"
                     aria-valuemin="0"
                     aria-valuenow="1"
                     autocomplete="off"
-                    class="bp4-input"
+                    class="bp5-input"
                     id="numericInput-4"
                     max="256"
                     min="0"
@@ -1004,18 +951,17 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   />
                 </div>
                 <div
-                  class="bp4-button-group bp4-vertical bp4-fixed"
+                  class="bp5-button-group bp5-vertical bp5-fixed"
                 >
                   <button
                     aria-controls="numericInput-4"
                     aria-label="increment"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-up"
-                      icon="chevron-up"
+                      class="bp5-icon bp5-icon-chevron-up"
                     >
                       <svg
                         data-icon="chevron-up"
@@ -1025,8 +971,10 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                         width="16"
                       >
                         <path
-                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                          d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1034,13 +982,12 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                   <button
                     aria-controls="numericInput-4"
                     aria-label="decrement"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-down"
-                      icon="chevron-down"
+                      class="bp5-icon bp5-icon-chevron-down"
                     >
                       <svg
                         data-icon="chevron-down"
@@ -1050,8 +997,10 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                         width="16"
                       >
                         <path
-                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                          d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1059,13 +1008,12 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                 </div>
               </div>
               <button
-                class="bp4-button"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-trash"
-                  icon="trash"
+                  class="bp5-icon bp5-icon-trash"
                 >
                   <svg
                     data-icon="trash"
@@ -1085,20 +1033,19 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
               title=""
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-plus"
-                icon="plus"
+                class="bp5-icon bp5-icon-plus"
               >
                 <svg
                   data-icon="plus"
@@ -1114,7 +1061,7 @@ exports[`RuleEditor matches snapshot with existing tier and non existing tier in
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Add historical tier replication
               </span>
@@ -1135,18 +1082,17 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
     class="title"
   >
     <button
-      class="bp4-button bp4-minimal left"
+      class="bp5-button bp5-minimal left"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         loadByInterval(2010-01-01/2015-01-01, 2x)
       </span>
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-caret-down"
-        icon="caret-down"
+        class="bp5-icon bp5-icon-caret-down"
       >
         <svg
           data-icon="caret-down"
@@ -1166,13 +1112,12 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
       class="spacer"
     />
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
+        class="bp5-icon bp5-icon-trash"
       >
         <svg
           data-icon="trash"
@@ -1190,28 +1135,29 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
     </button>
   </div>
   <div
-    class="bp4-collapse"
+    class="bp5-collapse"
     style="height: auto; overflow-y: visible; transition: none;"
   >
     <div
       aria-hidden="false"
-      class="bp4-collapse-body"
+      class="bp5-collapse-body"
       style="transform: translateY(0); transition: none;"
     >
       <div
-        class="bp4-card bp4-elevation-2"
+        class="bp5-card bp5-elevation-2"
       >
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <div
-                class="bp4-html-select"
+                class="bp5-html-select"
               >
                 <select>
                   <option
@@ -1266,34 +1212,32 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-18"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-18"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <input
-                  class="bp4-input"
+                  class="bp5-input"
                   placeholder="2010-01-01/2020-01-01"
                   type="text"
                   value="2010-01-01/2015-01-01"
@@ -1303,27 +1247,28 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Tier:
                 </span>
               </button>
               <div
-                class="bp4-html-select bp4-fill"
+                class="bp5-html-select bp5-fill"
               >
                 <select>
                   <option
@@ -1343,52 +1288,52 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-19"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-19"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Replicants:
                 </span>
               </button>
               <div
-                class="bp4-control-group bp4-numeric-input"
+                class="bp5-control-group bp5-numeric-input"
+                role="group"
               >
                 <div
-                  class="bp4-input-group"
+                  class="bp5-input-group"
                 >
                   <input
+                    aria-disabled="false"
                     aria-valuemax="256"
                     aria-valuemin="0"
                     aria-valuenow="2"
                     autocomplete="off"
-                    class="bp4-input"
+                    class="bp5-input"
                     id="numericInput-2"
                     max="256"
                     min="0"
@@ -1398,18 +1343,17 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                   />
                 </div>
                 <div
-                  class="bp4-button-group bp4-vertical bp4-fixed"
+                  class="bp5-button-group bp5-vertical bp5-fixed"
                 >
                   <button
                     aria-controls="numericInput-2"
                     aria-label="increment"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-up"
-                      icon="chevron-up"
+                      class="bp5-icon bp5-icon-chevron-up"
                     >
                       <svg
                         data-icon="chevron-up"
@@ -1419,8 +1363,10 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                          d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1428,13 +1374,12 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                   <button
                     aria-controls="numericInput-2"
                     aria-label="decrement"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-down"
-                      icon="chevron-down"
+                      class="bp5-icon bp5-icon-chevron-down"
                     >
                       <svg
                         data-icon="chevron-down"
@@ -1444,8 +1389,10 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                          d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1453,13 +1400,12 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                 </div>
               </div>
               <button
-                class="bp4-button"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-trash"
-                  icon="trash"
+                  class="bp5-icon bp5-icon-trash"
                 >
                   <svg
                     data-icon="trash"
@@ -1479,20 +1425,19 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
               title=""
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-plus"
-                icon="plus"
+                class="bp5-icon bp5-icon-plus"
               >
                 <svg
                   data-icon="plus"
@@ -1508,7 +1453,7 @@ exports[`RuleEditor matches snapshot with existing tier in rule 1`] = `
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Add historical tier replication
               </span>
@@ -1529,18 +1474,17 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
     class="title"
   >
     <button
-      class="bp4-button bp4-minimal left"
+      class="bp5-button bp5-minimal left"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         loadByInterval(2010-01-01/2015-01-01, 2x)
       </span>
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-caret-down"
-        icon="caret-down"
+        class="bp5-icon bp5-icon-caret-down"
       >
         <svg
           data-icon="caret-down"
@@ -1560,13 +1504,12 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
       class="spacer"
     />
     <button
-      class="bp4-button bp4-minimal"
+      class="bp5-button bp5-minimal"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
+        class="bp5-icon bp5-icon-trash"
       >
         <svg
           data-icon="trash"
@@ -1584,28 +1527,29 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
     </button>
   </div>
   <div
-    class="bp4-collapse"
+    class="bp5-collapse"
     style="height: auto; overflow-y: visible; transition: none;"
   >
     <div
       aria-hidden="false"
-      class="bp4-collapse-body"
+      class="bp5-collapse-body"
       style="transform: translateY(0); transition: none;"
     >
       <div
-        class="bp4-card bp4-elevation-2"
+        class="bp5-card bp5-elevation-2"
       >
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <div
-                class="bp4-html-select"
+                class="bp5-html-select"
               >
                 <select>
                   <option
@@ -1660,34 +1604,32 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-10"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-10"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <input
-                  class="bp4-input"
+                  class="bp5-input"
                   placeholder="2010-01-01/2020-01-01"
                   type="text"
                   value="2010-01-01/2015-01-01"
@@ -1697,27 +1639,28 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <div
-              class="bp4-control-group"
+              class="bp5-control-group"
+              role="group"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Tier:
                 </span>
               </button>
               <div
-                class="bp4-html-select bp4-fill"
+                class="bp5-html-select bp5-fill"
               >
                 <select>
                   <option
@@ -1742,52 +1685,52 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                   </option>
                 </select>
                 <span
-                  class="bp4-icon bp4-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
+                  class="bp5-icon bp5-icon-double-caret-vertical"
                 >
                   <svg
-                    aria-labelledby="iconTitle-11"
                     data-icon="double-caret-vertical"
                     height="16"
                     role="img"
                     viewBox="0 0 16 16"
                     width="16"
                   >
-                    <title
-                      id="iconTitle-11"
-                    >
+                    <title>
                       Open dropdown
                     </title>
                     <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                      d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                       fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
                     />
                   </svg>
                 </span>
               </div>
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 style="pointer-events: none;"
                 type="button"
               >
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Replicants:
                 </span>
               </button>
               <div
-                class="bp4-control-group bp4-numeric-input"
+                class="bp5-control-group bp5-numeric-input"
+                role="group"
               >
                 <div
-                  class="bp4-input-group"
+                  class="bp5-input-group"
                 >
                   <input
+                    aria-disabled="false"
                     aria-valuemax="256"
                     aria-valuemin="0"
                     aria-valuenow="2"
                     autocomplete="off"
-                    class="bp4-input"
+                    class="bp5-input"
                     id="numericInput-1"
                     max="256"
                     min="0"
@@ -1797,18 +1740,17 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                   />
                 </div>
                 <div
-                  class="bp4-button-group bp4-vertical bp4-fixed"
+                  class="bp5-button-group bp5-vertical bp5-fixed"
                 >
                   <button
                     aria-controls="numericInput-1"
                     aria-label="increment"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-up"
-                      icon="chevron-up"
+                      class="bp5-icon bp5-icon-chevron-up"
                     >
                       <svg
                         data-icon="chevron-up"
@@ -1818,8 +1760,10 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                          d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1827,13 +1771,12 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                   <button
                     aria-controls="numericInput-1"
                     aria-label="decrement"
-                    class="bp4-button"
+                    class="bp5-button"
                     type="button"
                   >
                     <span
                       aria-hidden="true"
-                      class="bp4-icon bp4-icon-chevron-down"
-                      icon="chevron-down"
+                      class="bp5-icon bp5-icon-chevron-down"
                     >
                       <svg
                         data-icon="chevron-down"
@@ -1843,8 +1786,10 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                         width="16"
                       >
                         <path
-                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                          d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                           fill-rule="evenodd"
+                          style="transform-origin: center;"
+                          transform="scale(0.05, -0.05) translate(-160, -160)"
                         />
                       </svg>
                     </span>
@@ -1852,13 +1797,12 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                 </div>
               </div>
               <button
-                class="bp4-button"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-trash"
-                  icon="trash"
+                  class="bp5-icon bp5-icon-trash"
                 >
                   <svg
                     data-icon="trash"
@@ -1878,20 +1822,19 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
           </div>
         </div>
         <div
-          class="bp4-form-group"
+          class="bp5-form-group"
         >
           <div
-            class="bp4-form-content"
+            class="bp5-form-content"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
               title=""
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-plus"
-                icon="plus"
+                class="bp5-icon bp5-icon-plus"
               >
                 <svg
                   data-icon="plus"
@@ -1907,7 +1850,7 @@ exports[`RuleEditor matches snapshot with non existing tier in rule 1`] = `
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Add historical tier replication
               </span>
diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
index d4746e616ab3..e28e58aa00d8 100644
--- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -43,36 +43,38 @@ exports[`SegmentTimeline matches snapshot 1`] = `
     class="side-control"
   >
     <div
-      class="bp4-form-group"
+      class="bp5-form-group"
     >
       <div
-        class="bp4-form-content"
+        class="bp5-form-content"
       >
-        <div>
+        <div
+          class="bp5-radio-group"
+        >
           <label
-            class="bp4-control bp4-radio"
+            class="bp5-control bp5-radio"
           >
             <input
               checked=""
-              name="Blueprint4.RadioGroup-0"
+              name="Blueprint5.RadioGroup-0"
               type="radio"
               value="sizeData"
             />
             <span
-              class="bp4-control-indicator"
+              class="bp5-control-indicator"
             />
             Total size
           </label>
           <label
-            class="bp4-control bp4-radio"
+            class="bp5-control bp5-radio"
           >
             <input
-              name="Blueprint4.RadioGroup-0"
+              name="Blueprint5.RadioGroup-0"
               type="radio"
               value="countData"
             />
             <span
-              class="bp4-control-indicator"
+              class="bp5-control-indicator"
             />
             Segment count
           </label>
@@ -80,112 +82,87 @@ exports[`SegmentTimeline matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-form-group"
+      class="bp5-form-group"
     >
       <label
-        class="bp4-label"
+        class="bp5-label"
       >
         Datasource
          
         <span
-          class="bp4-text-muted"
+          class="bp5-text-muted"
         />
       </label>
       <div
-        class="bp4-form-content"
+        class="bp5-form-content"
       >
         <div
           aria-controls="listbox-1"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="bp4-popover2-target bp4-fill"
+          class="bp5-popover-target bp5-fill"
           role="combobox"
         >
           <button
-            class="bp4-button bp4-fill"
+            class="bp5-button bp5-fill"
             type="button"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Show all
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-caret-down"
-              icon="caret-down"
-            >
-              <svg
-                data-icon="caret-down"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+              data-icon="caret-down"
+            />
           </button>
         </div>
       </div>
     </div>
     <div
-      class="bp4-form-group"
+      class="bp5-form-group"
     >
       <label
-        class="bp4-label"
+        class="bp5-label"
       >
         Interval
          
         <span
-          class="bp4-text-muted"
+          class="bp5-text-muted"
         />
       </label>
       <div
-        class="bp4-form-content"
+        class="bp5-form-content"
       >
         <span
-          aria-haspopup="true"
-          class="date-range-selector bp4-popover2-target"
+          class="bp5-popover2-target date-range-selector bp5-popover-target"
         >
           <div
-            class="bp4-input-group bp4-read-only"
+            class="bp5-input-group bp5-read-only"
           >
             <input
-              class="bp4-input"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="bp5-input"
               readonly=""
               style="padding-right: 0px;"
               type="text"
               value="2021-03-09 ➔ 2021-06-09"
             />
             <span
-              class="bp4-input-action"
+              class="bp5-input-action"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-calendar"
-                  icon="calendar"
-                >
-                  <svg
-                    data-icon="calendar"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-calendar"
+                  data-icon="calendar"
+                />
               </button>
             </span>
           </div>
diff --git a/web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap b/web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap
index b93816775e8d..a5f401574625 100644
--- a/web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap
+++ b/web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap
@@ -8,40 +8,40 @@ exports[`ShowJson matches snapshot 1`] = `
     class="top-actions"
   >
     <div
-      class="bp4-button-group right-buttons"
+      class="bp5-button-group right-buttons"
     >
       <button
-        class="bp4-button bp4-disabled bp4-minimal"
+        class="bp5-button bp5-disabled bp5-minimal"
         disabled=""
         tabindex="-1"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           Download
         </span>
       </button>
       <button
-        class="bp4-button bp4-disabled bp4-minimal"
+        class="bp5-button bp5-disabled bp5-minimal"
         disabled=""
         tabindex="-1"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           Copy
         </span>
       </button>
       <button
-        class="bp4-button bp4-disabled bp4-minimal"
+        class="bp5-button bp5-disabled bp5-minimal"
         disabled=""
         tabindex="-1"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           View raw
         </span>
diff --git a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
index 796ce2ba111b..497eeb33a468 100644
--- a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
+++ b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
@@ -8,49 +8,50 @@ exports[`ShowLog describe show log 1`] = `
     class="top-actions"
   >
     <label
-      class="bp4-control bp4-switch tail-log"
+      class="bp5-control bp5-switch tail-log"
     >
       <input
         checked=""
         type="checkbox"
       />
       <span
-        class="bp4-control-indicator"
+        class="bp5-control-indicator"
       />
       Tail log
     </label>
     <div
-      class="bp4-button-group right-buttons"
+      class="bp5-button-group right-buttons"
     >
       <a
-        class="bp4-button bp4-minimal"
+        aria-disabled="false"
+        class="bp5-button bp5-minimal"
         download="test"
         href="/some/base_url/druid/index/test/log"
         role="button"
         tabindex="0"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           Download
         </span>
       </a>
       <button
-        class="bp4-button bp4-minimal"
+        class="bp5-button bp5-minimal"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           Copy
         </span>
       </button>
       <button
-        class="bp4-button bp4-minimal"
+        class="bp5-button bp5-minimal"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           View full log
         </span>
diff --git a/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap b/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap
index c01065774a5a..bb75fada7a63 100644
--- a/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap
+++ b/web-console/src/components/show-value/__snapshots__/show-value.spec.tsx.snap
@@ -8,14 +8,14 @@ exports[`ShowValue matches snapshot 1`] = `
     class="top-actions"
   >
     <div
-      class="bp4-button-group right-buttons"
+      class="bp5-button-group right-buttons"
     >
       <button
-        class="bp4-button bp4-minimal"
+        class="bp5-button bp5-minimal"
         type="button"
       >
         <span
-          class="bp4-button-text"
+          class="bp5-button-text"
         >
           Download
         </span>
@@ -26,7 +26,7 @@ exports[`ShowValue matches snapshot 1`] = `
     class="main-area"
   >
     <textarea
-      class="bp4-input"
+      class="bp5-input bp5-text-area"
       readonly=""
     >
       { hello: 'world' }
diff --git a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
index 9d050413189e..2d0679df6580 100644
--- a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
+++ b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
@@ -5,43 +5,31 @@ exports[`SuggestibleInput matches snapshot 1`] = `
   class="formatted-input suggestible-input"
 >
   <div
-    class="bp4-input-group"
+    class="bp5-input-group"
   >
     <input
-      class="bp4-input"
+      class="bp5-input"
       style="padding-right: 0px;"
       type="text"
       value=""
     />
     <span
-      class="bp4-input-action"
+      class="bp5-input-action"
     >
       <span
-        aria-haspopup="true"
-        class="bp4-popover2-target"
+        class="bp5-popover2-target bp5-popover-target"
       >
         <button
-          class="bp4-button bp4-minimal"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          class="bp5-button bp5-minimal"
           type="button"
         >
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
-          >
-            <svg
-              data-icon="caret-down"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+            class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+            data-icon="caret-down"
+          />
         </button>
       </span>
     </span>
@@ -54,29 +42,29 @@ exports[`SuggestibleInput matches snapshot with escaped value 1`] = `
   class="formatted-input suggestible-input"
 >
   <div
-    class="bp4-input-group"
+    class="bp5-input-group"
   >
     <input
-      class="bp4-input"
+      class="bp5-input"
       style="padding-right: 0px;"
       type="text"
       value="Here are some chars \\t\\r\\n lol"
     />
     <span
-      class="bp4-input-action"
+      class="bp5-input-action"
     >
       <span
-        aria-haspopup="true"
-        class="bp4-popover2-target"
+        class="bp5-popover2-target bp5-popover-target"
       >
         <button
-          class="bp4-button bp4-minimal"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          class="bp5-button bp5-minimal"
           type="button"
         >
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
+            class="bp5-icon bp5-icon-caret-down"
           >
             <svg
               data-icon="caret-down"
diff --git a/web-console/src/components/suggestion-menu/__snapshots__/suggestion-menu.spec.tsx.snap b/web-console/src/components/suggestion-menu/__snapshots__/suggestion-menu.spec.tsx.snap
index f88418651017..67ca637b18d0 100644
--- a/web-console/src/components/suggestion-menu/__snapshots__/suggestion-menu.spec.tsx.snap
+++ b/web-console/src/components/suggestion-menu/__snapshots__/suggestion-menu.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SuggestionMenu matches snapshot 1`] = `
 <ul
-  class="bp4-menu suggestion-menu"
+  class="suggestion-menu bp5-menu"
   role="menu"
 >
   <li
@@ -10,12 +10,12 @@ exports[`SuggestionMenu matches snapshot 1`] = `
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         dog
       </div>
@@ -26,12 +26,12 @@ exports[`SuggestionMenu matches snapshot 1`] = `
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         cat
       </div>
@@ -42,60 +42,60 @@ exports[`SuggestionMenu matches snapshot 1`] = `
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         skunk
       </div>
     </a>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
         >
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Fruit
-          </div>
-          <span
-            aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+          Fruit
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </ul>
diff --git a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
index a4bdb2d1409c..10b8397ce6fc 100644
--- a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
+++ b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
@@ -31,22 +31,9 @@ exports[`TableCell matches snapshot array long 1`] = `
   7, 98, 99]
   <span
     aria-hidden="true"
-    class="bp4-icon bp4-icon-more action-icon"
-    icon="more"
-  >
-    <svg
-      data-icon="more"
-      height="16"
-      role="img"
-      viewBox="0 0 16 16"
-      width="16"
-    >
-      <path
-        d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </span>
+    class="bp5-icon bp5-icon-standard bp5-icon-more action-icon"
+    data-icon="more"
+  />
 </div>
 `;
 
@@ -111,8 +98,7 @@ exports[`TableCell matches snapshot truncate 1`] = `
   test_test_
   <span
     aria-hidden="true"
-    class="bp4-icon bp4-icon-more action-icon"
-    icon="more"
+    class="bp5-icon bp5-icon-more action-icon"
   >
     <svg
       data-icon="more"
diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index 651ef7620e73..579afc1fd8e1 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -2,15 +2,16 @@
 
 exports[`TableColumnSelector matches snapshot 1`] = `
 <span
-  aria-haspopup="true"
-  class="table-column-selector bp4-popover2-target"
+  class="bp5-popover2-target table-column-selector bp5-popover-target"
 >
   <button
-    class="bp4-button"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="bp5-button"
     type="button"
   >
     <span
-      class="bp4-button-text"
+      class="bp5-button-text"
     >
       Columns 
       <span
@@ -21,22 +22,9 @@ exports[`TableColumnSelector matches snapshot 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-caret-down"
-      icon="caret-down"
-    >
-      <svg
-        data-icon="caret-down"
-        height="16"
-        role="img"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
+      class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+      data-icon="caret-down"
+    />
   </button>
 </span>
 `;
diff --git a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
index 52fbee102425..0ea33ead11e4 100644
--- a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
+++ b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
@@ -1,53 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TimedButton matches snapshot 1`] = `
-<Blueprint4.ButtonGroup
+<Blueprint5.ButtonGroup
   className="timed-button"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     onClick={[Function]}
   />
-  <Blueprint4.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
+  <Popover2
     content={
-      <Blueprint4.Menu>
-        <Blueprint4.MenuDivider
+      <Blueprint5.Menu>
+        <Blueprint5.MenuDivider
           title="Select delay"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="tick-circle"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="timeValue"
         />
-      </Blueprint4.Menu>
+      </Blueprint5.Menu>
     }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={false}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    matchTargetWidth={false}
-    minimal={false}
-    openOnTargetFocus={true}
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       rightIcon="caret-down"
     />
-  </Blueprint4.Popover2>
-</Blueprint4.ButtonGroup>
+  </Popover2>
+</Blueprint5.ButtonGroup>
 `;
diff --git a/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap b/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
index f3228aac108d..2f1c63ed0481 100644
--- a/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
+++ b/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
@@ -5,35 +5,35 @@ exports[`WarningChecklist matches snapshot 1`] = `
   class="warning-checklist"
 >
   <label
-    class="bp4-control bp4-switch danger-switch"
+    class="bp5-control bp5-switch danger-switch"
   >
     <input
       type="checkbox"
     />
     <span
-      class="bp4-control-indicator"
+      class="bp5-control-indicator"
     />
     Check A
   </label>
   <label
-    class="bp4-control bp4-switch danger-switch"
+    class="bp5-control bp5-switch danger-switch"
   >
     <input
       type="checkbox"
     />
     <span
-      class="bp4-control-indicator"
+      class="bp5-control-indicator"
     />
     Check B
   </label>
   <label
-    class="bp4-control bp4-switch danger-switch"
+    class="bp5-control bp5-switch danger-switch"
   >
     <input
       type="checkbox"
     />
     <span
-      class="bp4-control-indicator"
+      class="bp5-control-indicator"
     />
     I am totes sure
   </label>
diff --git a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
index 7ea843d01dfb..cca046b1c2f3 100644
--- a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
@@ -2,82 +2,72 @@
 
 exports[`AboutDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog about-dialog"
+        aria-modal="true"
+        class="bp5-dialog about-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-graph"
-            icon="graph"
+            class="bp5-icon bp5-icon-standard bp5-icon-graph"
+            data-icon="graph"
             tabindex="-1"
-          >
-            <svg
-              data-icon="graph"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M14 3c-1.06 0-1.92.83-1.99 1.88l-1.93.97A2.95 2.95 0 008 5c-.56 0-1.08.16-1.52.43L3.97 3.34C3.98 3.23 4 3.12 4 3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.24 0 .47-.05.68-.13l2.51 2.09C5.08 7.29 5 7.63 5 8c0 .96.46 1.81 1.16 2.35l-.56 1.69c-.91.19-1.6.99-1.6 1.96 0 1.1.9 2 2 2s2-.9 2-2c0-.51-.2-.97-.51-1.32l.56-1.69A2.99 2.99 0 0011 8c0-.12-.02-.24-.04-.36l1.94-.97c.32.21.69.33 1.1.33 1.1 0 2-.9 2-2s-.9-2-2-2z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+          />
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Apache Druid
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <p>
             <strong>
@@ -119,30 +109,31 @@ exports[`AboutDialog matches snapshot 1`] = `
           </p>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
             </button>
             <a
-              class="bp4-button bp4-intent-primary"
+              aria-disabled="false"
+              class="bp5-button bp5-intent-primary"
               href="https://druid.apache.org"
               role="button"
               tabindex="0"
               target="_blank"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Visit Druid
               </span>
@@ -152,7 +143,7 @@ exports[`AboutDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/alert-dialog/__snapshots__/alert-dialog.spec.tsx.snap b/web-console/src/dialogs/alert-dialog/__snapshots__/alert-dialog.spec.tsx.snap
index 28ce19fa6e55..974e5a7aadba 100644
--- a/web-console/src/dialogs/alert-dialog/__snapshots__/alert-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/alert-dialog/__snapshots__/alert-dialog.spec.tsx.snap
@@ -2,31 +2,33 @@
 
 exports[`AlertDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
-        class="bp4-dialog bp4-alert alert-dialog"
+        aria-modal="true"
+        class="bp5-dialog bp5-alert alert-dialog"
         role="dialog"
       >
         <div
-          class="bp4-alert-body"
+          class="bp5-alert-body"
         >
           <div
-            class="bp4-alert-contents"
+            class="bp5-alert-contents"
           >
             <p>
               Blah blah
@@ -37,24 +39,24 @@ exports[`AlertDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-alert-footer"
+          class="bp5-alert-footer"
         >
           <button
-            class="bp4-button bp4-intent-primary"
+            class="bp5-button bp5-intent-primary"
             type="button"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Run it anyway
             </span>
           </button>
           <button
-            class="bp4-button"
+            class="bp5-button"
             type="button"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Cancel
             </span>
@@ -63,7 +65,7 @@ exports[`AlertDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/async-action-dialog/__snapshots__/async-action-dialog.spec.tsx.snap b/web-console/src/dialogs/async-action-dialog/__snapshots__/async-action-dialog.spec.tsx.snap
index a48a26b177bf..4e47c1947e92 100644
--- a/web-console/src/dialogs/async-action-dialog/__snapshots__/async-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/async-action-dialog/__snapshots__/async-action-dialog.spec.tsx.snap
@@ -2,52 +2,54 @@
 
 exports[`AsyncActionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
-        class="bp4-dialog bp4-alert async-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog bp5-alert async-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-alert-body"
+          class="bp5-alert-body"
         >
           <div
-            class="bp4-alert-contents"
+            class="bp5-alert-contents"
           />
         </div>
         <div
-          class="bp4-alert-footer"
+          class="bp5-alert-footer"
         >
           <button
-            class="bp4-button"
+            class="bp5-button"
             type="button"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               test
             </span>
           </button>
           <button
-            class="bp4-button"
+            class="bp5-button"
             type="button"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Cancel
             </span>
@@ -56,7 +58,7 @@ exports[`AsyncActionDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/compaction-config-dialog/__snapshots__/compaction-config-dialog.spec.tsx.snap b/web-console/src/dialogs/compaction-config-dialog/__snapshots__/compaction-config-dialog.spec.tsx.snap
index 30df7eeca2ff..642e9faeb224 100644
--- a/web-console/src/dialogs/compaction-config-dialog/__snapshots__/compaction-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/compaction-config-dialog/__snapshots__/compaction-config-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic partitionsSpec) 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="compaction-config-dialog"
   isOpen={true}
@@ -36,17 +36,17 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
             {
               "info": <p>
                 For perfect rollup, you should use either 
-                <Unknown>
+                <ForwardRef>
                   hashed
-                </Unknown>
+                </ForwardRef>
                  (partitioning based on the hash of dimensions in each row) or 
-                <Unknown>
+                <ForwardRef>
                   range
-                </Unknown>
+                </ForwardRef>
                  (based on several dimensions). For best-effort rollup, you should use 
-                <Unknown>
+                <ForwardRef>
                   dynamic
-                </Unknown>
+                </ForwardRef>
                 .
               </p>,
               "label": "Partitioning type",
@@ -87,29 +87,29 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -125,39 +125,39 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
                   Target number of rows to include in a partition, should be a number that targets segments of 500MB~1GB.
                 </p>
                 <p>
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    renamed to 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -176,13 +176,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows across partitions and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -225,13 +225,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -248,13 +248,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -322,13 +322,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
               "hideInMore": true,
               "info": <React.Fragment>
                 Maximum number of input segments to process in a single subtask. This limit is to avoid task failures when the ingestion spec is too long. There are two known limits on the max size of serialized ingestion spec, i.e., the max ZNode size in ZooKeeper (
-                <Unknown>
+                <ForwardRef>
                   jute.maxbuffer
-                </Unknown>
+                </ForwardRef>
                 ) and the max packet size in MySQL (
-                <Unknown>
+                <ForwardRef>
                   max_allowed_packet
-                </Unknown>
+                </ForwardRef>
                 ). These can make ingestion tasks fail if the serialized ingestion spec size hits one of them.
               </React.Fragment>,
               "label": "Max num files (segments)",
@@ -370,7 +370,7 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
         }
         inlineInfo={true}
       >
-        <Blueprint4.Switch
+        <Blueprint5.Switch
           checked={false}
           label="Use concurrent locks (experimental)"
           onChange={[Function]}
@@ -379,27 +379,27 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
     </React.Fragment>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="history-button"
         minimal={true}
         onClick={[Function]}
         text="History"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         intent="danger"
         onClick={[Function]}
         text="Delete"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -407,11 +407,11 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (dynamic
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed partitionsSpec) 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="compaction-config-dialog"
   isOpen={true}
@@ -446,17 +446,17 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
             {
               "info": <p>
                 For perfect rollup, you should use either 
-                <Unknown>
+                <ForwardRef>
                   hashed
-                </Unknown>
+                </ForwardRef>
                  (partitioning based on the hash of dimensions in each row) or 
-                <Unknown>
+                <ForwardRef>
                   range
-                </Unknown>
+                </ForwardRef>
                  (based on several dimensions). For best-effort rollup, you should use 
-                <Unknown>
+                <ForwardRef>
                   dynamic
-                </Unknown>
+                </ForwardRef>
                 .
               </p>,
               "label": "Partitioning type",
@@ -497,29 +497,29 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -535,39 +535,39 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
                   Target number of rows to include in a partition, should be a number that targets segments of 500MB~1GB.
                 </p>
                 <p>
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    renamed to 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -586,13 +586,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows across partitions and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -635,13 +635,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -658,13 +658,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -732,13 +732,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
               "hideInMore": true,
               "info": <React.Fragment>
                 Maximum number of input segments to process in a single subtask. This limit is to avoid task failures when the ingestion spec is too long. There are two known limits on the max size of serialized ingestion spec, i.e., the max ZNode size in ZooKeeper (
-                <Unknown>
+                <ForwardRef>
                   jute.maxbuffer
-                </Unknown>
+                </ForwardRef>
                 ) and the max packet size in MySQL (
-                <Unknown>
+                <ForwardRef>
                   max_allowed_packet
-                </Unknown>
+                </ForwardRef>
                 ). These can make ingestion tasks fail if the serialized ingestion spec size hits one of them.
               </React.Fragment>,
               "label": "Max num files (segments)",
@@ -780,7 +780,7 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
         }
         inlineInfo={true}
       >
-        <Blueprint4.Switch
+        <Blueprint5.Switch
           checked={false}
           label="Use concurrent locks (experimental)"
           onChange={[Function]}
@@ -789,27 +789,27 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
     </React.Fragment>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="history-button"
         minimal={true}
         onClick={[Function]}
         text="History"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         intent="danger"
         onClick={[Function]}
         text="Delete"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -817,11 +817,11 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (hashed p
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`CompactionConfigDialog matches snapshot with compactionConfig (range partitionsSpec) 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="compaction-config-dialog"
   isOpen={true}
@@ -856,17 +856,17 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
             {
               "info": <p>
                 For perfect rollup, you should use either 
-                <Unknown>
+                <ForwardRef>
                   hashed
-                </Unknown>
+                </ForwardRef>
                  (partitioning based on the hash of dimensions in each row) or 
-                <Unknown>
+                <ForwardRef>
                   range
-                </Unknown>
+                </ForwardRef>
                  (based on several dimensions). For best-effort rollup, you should use 
-                <Unknown>
+                <ForwardRef>
                   dynamic
-                </Unknown>
+                </ForwardRef>
                 .
               </p>,
               "label": "Partitioning type",
@@ -907,29 +907,29 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -945,39 +945,39 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
                   Target number of rows to include in a partition, should be a number that targets segments of 500MB~1GB.
                 </p>
                 <p>
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    renamed to 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -996,13 +996,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows across partitions and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1045,13 +1045,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1068,13 +1068,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1142,13 +1142,13 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
               "hideInMore": true,
               "info": <React.Fragment>
                 Maximum number of input segments to process in a single subtask. This limit is to avoid task failures when the ingestion spec is too long. There are two known limits on the max size of serialized ingestion spec, i.e., the max ZNode size in ZooKeeper (
-                <Unknown>
+                <ForwardRef>
                   jute.maxbuffer
-                </Unknown>
+                </ForwardRef>
                 ) and the max packet size in MySQL (
-                <Unknown>
+                <ForwardRef>
                   max_allowed_packet
-                </Unknown>
+                </ForwardRef>
                 ). These can make ingestion tasks fail if the serialized ingestion spec size hits one of them.
               </React.Fragment>,
               "label": "Max num files (segments)",
@@ -1190,7 +1190,7 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
         }
         inlineInfo={true}
       >
-        <Blueprint4.Switch
+        <Blueprint5.Switch
           checked={false}
           label="Use concurrent locks (experimental)"
           onChange={[Function]}
@@ -1199,27 +1199,27 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
     </React.Fragment>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="history-button"
         minimal={true}
         onClick={[Function]}
         text="History"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         intent="danger"
         onClick={[Function]}
         text="Delete"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={true}
         intent="primary"
         onClick={[Function]}
@@ -1227,11 +1227,11 @@ exports[`CompactionConfigDialog matches snapshot with compactionConfig (range pa
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="compaction-config-dialog"
   isOpen={true}
@@ -1266,17 +1266,17 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
             {
               "info": <p>
                 For perfect rollup, you should use either 
-                <Unknown>
+                <ForwardRef>
                   hashed
-                </Unknown>
+                </ForwardRef>
                  (partitioning based on the hash of dimensions in each row) or 
-                <Unknown>
+                <ForwardRef>
                   range
-                </Unknown>
+                </ForwardRef>
                  (based on several dimensions). For best-effort rollup, you should use 
-                <Unknown>
+                <ForwardRef>
                   dynamic
-                </Unknown>
+                </ForwardRef>
                 .
               </p>,
               "label": "Partitioning type",
@@ -1317,29 +1317,29 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1355,39 +1355,39 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
                   Target number of rows to include in a partition, should be a number that targets segments of 500MB~1GB.
                 </p>
                 <p>
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    renamed to 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                 </p>
                 <p>
                   If 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    is left unspecified, the Parallel task will determine
                    
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    automatically by 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                   .
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1406,13 +1406,13 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     numShards
-                  </Unknown>
+                  </ForwardRef>
                    will be used to evenly distribute rows across partitions and find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1455,13 +1455,13 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1478,13 +1478,13 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
                 </p>
                 <p>
                   Note that either 
-                  <Unknown>
+                  <ForwardRef>
                     targetRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    or 
-                  <Unknown>
+                  <ForwardRef>
                     maxRowsPerSegment
-                  </Unknown>
+                  </ForwardRef>
                    will be used to find the best partitioning. Leave blank to show all properties.
                 </p>
               </React.Fragment>,
@@ -1552,13 +1552,13 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
               "hideInMore": true,
               "info": <React.Fragment>
                 Maximum number of input segments to process in a single subtask. This limit is to avoid task failures when the ingestion spec is too long. There are two known limits on the max size of serialized ingestion spec, i.e., the max ZNode size in ZooKeeper (
-                <Unknown>
+                <ForwardRef>
                   jute.maxbuffer
-                </Unknown>
+                </ForwardRef>
                 ) and the max packet size in MySQL (
-                <Unknown>
+                <ForwardRef>
                   max_allowed_packet
-                </Unknown>
+                </ForwardRef>
                 ). These can make ingestion tasks fail if the serialized ingestion spec size hits one of them.
               </React.Fragment>,
               "label": "Max num files (segments)",
@@ -1600,7 +1600,7 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
         }
         inlineInfo={true}
       >
-        <Blueprint4.Switch
+        <Blueprint5.Switch
           checked={false}
           label="Use concurrent locks (experimental)"
           onChange={[Function]}
@@ -1609,18 +1609,18 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
     </React.Fragment>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         className="history-button"
         minimal={true}
         onClick={[Function]}
         text="History"
       />
-      <Blueprint4.Tooltip2
+      <Blueprint5.Tooltip
         compact={false}
         content="There is no compaction config currently set for this datasource"
         hoverCloseDelay={0}
@@ -1629,17 +1629,17 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
         minimal={false}
         transitionDuration={100}
       >
-        <Blueprint4.Button
+        <Blueprint5.Button
           disabled={true}
           intent="danger"
           text="Delete"
         />
-      </Blueprint4.Tooltip2>
-      <Blueprint4.Button
+      </Blueprint5.Tooltip>
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -1647,5 +1647,5 @@ exports[`CompactionConfigDialog matches snapshot without compactionConfig 1`] =
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
index 0fc1182304c5..b56f96baae2f 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -2,119 +2,96 @@
 
 exports[`Datasource table action dialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Datasource: test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-intent-primary tab-button"
+              class="bp5-button bp5-intent-primary tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-th"
-                icon="th"
-              >
-                <svg
-                  data-icon="th"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-th"
+                data-icon="th"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Records
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-list-columns"
-                icon="list-columns"
-              >
-                <svg
-                  data-icon="list-columns"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M0 2.973v-.936C0 1.468.46 1.01 1.029 1H7.97C8.541 1 9 1.468 9 2.027v.946C9 3.542 8.53 4 7.971 4H1.03C.459 4 0 3.542 0 2.973zm0 5v-.936C0 6.468.46 6.01 1.029 6H7.97C8.541 6 9 6.468 9 7.027v.946C9 8.542 8.53 9 7.971 9H1.03C.459 9 0 8.542 0 7.973zm0 5v-.936C0 11.468.46 11.01 1.029 11H7.97C8.541 11 9 11.468 9 12.027v.946C9 13.542 8.53 14 7.971 14H1.03C.459 14 0 13.542 0 12.973zm0 5v-.936C0 16.468.46 16.01 1.029 16H7.97C8.541 16 9 16.468 9 17.027v.946C9 18.542 8.53 19 7.971 19H1.03C.459 19 0 18.542 0 17.973zm11-15v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 1 20 1.468 20 2.027v.946C20 3.542 19.53 4 18.971 4H12.03C11.459 4 11 3.542 11 2.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 6 20 6.468 20 7.027v.946C20 8.542 19.53 9 18.971 9H12.03C11.459 9 11 8.542 11 7.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-list-columns"
+                data-icon="list-columns"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Columns
               </span>
@@ -163,72 +140,47 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="footer-actions-left"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-wrench"
-                  icon="wrench"
-                >
-                  <svg
-                    data-icon="wrench"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
+                  data-icon="wrench"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Actions
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-caret-down"
-                  icon="caret-down"
-                >
-                  <svg
-                    data-icon="caret-down"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                  data-icon="caret-down"
+                />
               </button>
             </span>
           </div>
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -238,7 +190,7 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap b/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
index f932bdcd675a..b277e7dc1545 100644
--- a/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
@@ -2,97 +2,87 @@
 
 exports[`DoctorDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog doctor-dialog"
+        aria-modal="true"
+        class="bp5-dialog doctor-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-pulse"
-            icon="pulse"
+            class="bp5-icon bp5-icon-standard bp5-icon-pulse"
+            data-icon="pulse"
             tabindex="-1"
-          >
-            <svg
-              data-icon="pulse"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M15 8h-1.46l-1.7-2.55-.02.01A.984.984 0 0011 5c-.43 0-.79.27-.93.65h-.01l-1.69 4.51-1.38-8.32h-.02A.989.989 0 006 1c-.41 0-.77.25-.92.61L2.34 8H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.41 0 .77-.25.92-.61l1.65-3.86 1.44 8.63h.02c.08.47.47.84.97.84.43 0 .79-.27.93-.65h.01l2.31-6.17.92 1.38.02-.01c.17.26.46.45.81.45h2c.55 0 1-.45 1-1s-.45-1-1-1z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+          />
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Druid Doctor
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="analyze-bar"
           >
             <div
-              class="bp4-callout diagnosis"
+              class="bp5-callout diagnosis bp5-callout-has-body-content"
             >
               Automated checks to troubleshoot issues with the cluster.
             </div>
             <button
-              class="bp4-button bp4-fill bp4-intent-primary"
+              class="bp5-button bp5-fill bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Analyze Druid cluster
               </span>
@@ -100,17 +90,17 @@ exports[`DoctorDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -120,7 +110,7 @@ exports[`DoctorDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/edit-context-dialog/__snapshots__/edit-context-dialog.spec.tsx.snap b/web-console/src/dialogs/edit-context-dialog/__snapshots__/edit-context-dialog.spec.tsx.snap
index 7a2ed054f3a4..8b5d68f84b37 100644
--- a/web-console/src/dialogs/edit-context-dialog/__snapshots__/edit-context-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/edit-context-dialog/__snapshots__/edit-context-dialog.spec.tsx.snap
@@ -2,56 +2,59 @@
 
 exports[`EditContextDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog edit-context-dialog"
+        aria-modal="true"
+        class="bp5-dialog edit-context-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Edit query context
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
@@ -149,27 +152,27 @@ exports[`EditContextDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
             </button>
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Save
               </span>
@@ -179,7 +182,7 @@ exports[`EditContextDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
index c14f2937286b..282ef28f71a3 100644
--- a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
@@ -2,114 +2,117 @@
 
 exports[`HistoryDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog history-dialog"
+        aria-modal="true"
+        class="bp5-dialog history-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             History
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
-            class="bp4-tabs bp4-vertical"
+            class="bp5-tabs bp5-vertical"
           >
             <div
-              class="bp4-tab-list"
+              class="bp5-tab-list"
               role="tablist"
             >
               <div
-                class="bp4-tab-indicator-wrapper"
+                class="bp5-tab-indicator-wrapper"
                 style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px; transition: none;"
               >
                 <div
-                  class="bp4-tab-indicator"
+                  class="bp5-tab-indicator"
                 />
               </div>
               <div
-                aria-controls="bp4-tab-panel_undefined_0"
+                aria-controls="bp5-tab-panel_undefined_0"
                 aria-disabled="false"
                 aria-expanded="true"
                 aria-selected="true"
-                class="bp4-tab"
+                class="bp5-tab"
                 data-tab-id="0"
-                id="bp4-tab-title_undefined_0"
+                id="bp5-tab-title_undefined_0"
                 role="tab"
                 tabindex="0"
               >
                 test @ 
               </div>
               <div
-                aria-controls="bp4-tab-panel_undefined_1"
+                aria-controls="bp5-tab-panel_undefined_1"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-selected="false"
-                class="bp4-tab"
+                class="bp5-tab"
                 data-tab-id="1"
-                id="bp4-tab-title_undefined_1"
+                id="bp5-tab-title_undefined_1"
                 role="tab"
                 tabindex="-1"
               >
                 test @ 
               </div>
               <div
-                class="bp4-flex-expander"
+                class="bp5-flex-expander"
               />
             </div>
             <div
               aria-hidden="false"
-              aria-labelledby="bp4-tab-title_undefined_0"
-              class="bp4-tab-panel panel"
-              id="bp4-tab-panel_undefined_0"
+              aria-labelledby="bp5-tab-title_undefined_0"
+              class="bp5-tab-panel panel"
+              id="bp5-tab-panel_undefined_0"
               role="tabpanel"
             >
               <div
@@ -119,14 +122,14 @@ exports[`HistoryDialog matches snapshot 1`] = `
                   class="top-actions"
                 >
                   <div
-                    class="bp4-button-group right-buttons"
+                    class="bp5-button-group right-buttons"
                   >
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                       type="button"
                     >
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Diff with previous
                       </span>
@@ -137,7 +140,7 @@ exports[`HistoryDialog matches snapshot 1`] = `
                   class="main-area"
                 >
                   <textarea
-                    class="bp4-input"
+                    class="bp5-input bp5-text-area"
                     readonly=""
                   >
                     {
@@ -150,35 +153,22 @@ exports[`HistoryDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-arrow-left"
-                icon="arrow-left"
-              >
-                <svg
-                  data-icon="arrow-left"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M13.99 6.99H4.41L7.7 3.7a1.003 1.003 0 00-1.42-1.42l-5 5a1.014 1.014 0 000 1.42l5 5a1.003 1.003 0 001.42-1.42L4.41 8.99H14c.55 0 1-.45 1-1s-.46-1-1.01-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-arrow-left"
+                data-icon="arrow-left"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Back
               </span>
@@ -188,7 +178,7 @@ exports[`HistoryDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/index-spec-dialog/__snapshots__/index-spec-dialog.spec.tsx.snap b/web-console/src/dialogs/index-spec-dialog/__snapshots__/index-spec-dialog.spec.tsx.snap
index e62ab04d270e..8f3d39417915 100644
--- a/web-console/src/dialogs/index-spec-dialog/__snapshots__/index-spec-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/index-spec-dialog/__snapshots__/index-spec-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IndexSpecDialog matches snapshot with indexSpec 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="index-spec-dialog"
   isOpen={true}
@@ -74,13 +74,13 @@ exports[`IndexSpecDialog matches snapshot with indexSpec 1`] = `
             "defaultValue": "longs",
             "info": <React.Fragment>
               Encoding format for long-typed columns. Applies regardless of whether they are dimensions or metrics. 
-              <Unknown>
+              <ForwardRef>
                 auto
-              </Unknown>
+              </ForwardRef>
                encodes the values using offset or lookup table depending on column cardinality, and store them with variable size. 
-              <Unknown>
+              <ForwardRef>
                 longs
-              </Unknown>
+              </ForwardRef>
                stores the value as-is with 8 bytes each.
             </React.Fragment>,
             "name": "longEncoding",
@@ -130,16 +130,16 @@ exports[`IndexSpecDialog matches snapshot with indexSpec 1`] = `
     />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -147,11 +147,11 @@ exports[`IndexSpecDialog matches snapshot with indexSpec 1`] = `
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`IndexSpecDialog matches snapshot without compactionConfig 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={false}
   className="index-spec-dialog"
   isOpen={true}
@@ -224,13 +224,13 @@ exports[`IndexSpecDialog matches snapshot without compactionConfig 1`] = `
             "defaultValue": "longs",
             "info": <React.Fragment>
               Encoding format for long-typed columns. Applies regardless of whether they are dimensions or metrics. 
-              <Unknown>
+              <ForwardRef>
                 auto
-              </Unknown>
+              </ForwardRef>
                encodes the values using offset or lookup table depending on column cardinality, and store them with variable size. 
-              <Unknown>
+              <ForwardRef>
                 longs
-              </Unknown>
+              </ForwardRef>
                stores the value as-is with 8 bytes each.
             </React.Fragment>,
             "name": "longEncoding",
@@ -276,16 +276,16 @@ exports[`IndexSpecDialog matches snapshot without compactionConfig 1`] = `
     />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -293,5 +293,5 @@ exports[`IndexSpecDialog matches snapshot without compactionConfig 1`] = `
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
diff --git a/web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap
index b0edee5ef4ce..5c42d6adf767 100644
--- a/web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LookupEditDialog matches snapshot 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canEscapeKeyClose={false}
   canOutsideClickClose={true}
   className="lookup-edit-dialog"
@@ -12,21 +12,21 @@ exports[`LookupEditDialog matches snapshot 1`] = `
   <div
     className="content"
   >
-    <Blueprint4.FormGroup
+    <Blueprint5.FormGroup
       label="Name"
     >
-      <Blueprint4.InputGroup
+      <Blueprint5.InputGroup
         disabled={false}
         intent="none"
         onChange={[Function]}
         placeholder="Enter the lookup name"
         value="test"
       />
-    </Blueprint4.FormGroup>
-    <Blueprint4.FormGroup
+    </Blueprint5.FormGroup>
+    <Blueprint5.FormGroup
       label="Tier"
     >
-      <HTMLSelect
+      <Blueprint5.HTMLSelect
         onChange={[Function]}
         value="test"
       >
@@ -40,16 +40,16 @@ exports[`LookupEditDialog matches snapshot 1`] = `
         >
           alt-tier
         </option>
-      </HTMLSelect>
-    </Blueprint4.FormGroup>
-    <Blueprint4.FormGroup
+      </Blueprint5.HTMLSelect>
+    </Blueprint5.FormGroup>
+    <Blueprint5.FormGroup
       label="Version"
     >
-      <Blueprint4.InputGroup
+      <Blueprint5.InputGroup
         onChange={[Function]}
         placeholder="Enter the lookup version"
         rightElement={
-          <Blueprint4.Button
+          <Blueprint5.Button
             minimal={true}
             onClick={[Function]}
             text="Set to current ISO time"
@@ -57,7 +57,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
         }
         value="test"
       />
-    </Blueprint4.FormGroup>
+    </Blueprint5.FormGroup>
     <Memo(FormJsonSelector)
       onChange={[Function]}
       tab="form"
@@ -100,22 +100,22 @@ exports[`LookupEditDialog matches snapshot 1`] = `
             "defined": [Function],
             "info": <p>
               A URI which specifies a directory (or other searchable resource) in which to search for files specified as a 
-              <Unknown>
+              <ForwardRef>
                 file
-              </Unknown>
+              </ForwardRef>
               , 
-              <Unknown>
+              <ForwardRef>
                 hdfs
-              </Unknown>
+              </ForwardRef>
               , 
-              <Unknown>
+              <ForwardRef>
                 s3
-              </Unknown>
+              </ForwardRef>
               , or
                
-              <Unknown>
+              <ForwardRef>
                 gs
-              </Unknown>
+              </ForwardRef>
                path prefix.
             </p>,
             "issueWithValue": [Function],
@@ -129,22 +129,22 @@ exports[`LookupEditDialog matches snapshot 1`] = `
             "defined": [Function],
             "info": <p>
               URI for the file of interest, specified as a 
-              <Unknown>
+              <ForwardRef>
                 file
-              </Unknown>
+              </ForwardRef>
               , 
-              <Unknown>
+              <ForwardRef>
                 hdfs
-              </Unknown>
+              </ForwardRef>
               ,
                
-              <Unknown>
+              <ForwardRef>
                 s3
-              </Unknown>
+              </ForwardRef>
               , or 
-              <Unknown>
+              <ForwardRef>
                 gs
-              </Unknown>
+              </ForwardRef>
                path
             </p>,
             "issueWithValue": [Function],
@@ -170,9 +170,9 @@ exports[`LookupEditDialog matches snapshot 1`] = `
               </p>
               <p>
                 The 
-                <Unknown>
+                <ForwardRef>
                   simpleJson
-                </Unknown>
+                </ForwardRef>
                  lookupParseSpec does not take any parameters. It is simply a line delimited JSON file where the field is the key, and the field's value is the value.
               </p>
             </React.Fragment>,
@@ -462,16 +462,16 @@ exports[`LookupEditDialog matches snapshot 1`] = `
     />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         intent="primary"
         onClick={[Function]}
@@ -479,5 +479,5 @@ exports[`LookupEditDialog matches snapshot 1`] = `
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
diff --git a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
index 945deeac4b90..b0eb33fb467f 100644
--- a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
@@ -2,91 +2,81 @@
 
 exports[`Lookup table action dialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Lookup: test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-intent-primary tab-button"
+              class="bp5-button bp5-intent-primary tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-list-columns"
-                icon="list-columns"
-              >
-                <svg
-                  data-icon="list-columns"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M0 2.973v-.936C0 1.468.46 1.01 1.029 1H7.97C8.541 1 9 1.468 9 2.027v.946C9 3.542 8.53 4 7.971 4H1.03C.459 4 0 3.542 0 2.973zm0 5v-.936C0 6.468.46 6.01 1.029 6H7.97C8.541 6 9 6.468 9 7.027v.946C9 8.542 8.53 9 7.971 9H1.03C.459 9 0 8.542 0 7.973zm0 5v-.936C0 11.468.46 11.01 1.029 11H7.97C8.541 11 9 11.468 9 12.027v.946C9 13.542 8.53 14 7.971 14H1.03C.459 14 0 13.542 0 12.973zm0 5v-.936C0 16.468.46 16.01 1.029 16H7.97C8.541 16 9 16.468 9 17.027v.946C9 18.542 8.53 19 7.971 19H1.03C.459 19 0 18.542 0 17.973zm11-15v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 1 20 1.468 20 2.027v.946C20 3.542 19.53 4 18.971 4H12.03C11.459 4 11 3.542 11 2.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 6 20 6.468 20 7.027v.946C20 8.542 19.53 9 18.971 9H12.03C11.459 9 11 8.542 11 7.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-list-columns"
+                data-icon="list-columns"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Values
               </span>
@@ -139,72 +129,47 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="footer-actions-left"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-wrench"
-                  icon="wrench"
-                >
-                  <svg
-                    data-icon="wrench"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
+                  data-icon="wrench"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Actions
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-caret-down"
-                  icon="caret-down"
-                >
-                  <svg
-                    data-icon="caret-down"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                  data-icon="caret-down"
+                />
               </button>
             </span>
           </div>
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -214,7 +179,7 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index 92f290c4a277..fe1c5ec3da47 100644
--- a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -2,63 +2,66 @@
 
 exports[`RetentionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog snitch-dialog retention-dialog"
+        aria-modal="true"
+        class="bp5-dialog snitch-dialog retention-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Edit retention rules: test-datasource
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <p>
             Druid uses rules to determine what data should be retained in the cluster. The rules are evaluated in order from top to bottom. For more information please refer to the
@@ -73,30 +76,30 @@ exports[`RetentionDialog matches snapshot 1`] = `
             .
           </p>
           <div
-            class="bp4-form-group form-json-selector"
+            class="bp5-form-group form-json-selector"
           >
             <div
-              class="bp4-form-content"
+              class="bp5-form-content"
             >
               <div
-                class="bp4-button-group bp4-fill"
+                class="bp5-button-group bp5-fill"
               >
                 <button
-                  class="bp4-button bp4-active"
+                  class="bp5-button bp5-active"
                   type="button"
                 >
                   <span
-                    class="bp4-button-text"
+                    class="bp5-button-text"
                   >
                     Form
                   </span>
                 </button>
                 <button
-                  class="bp4-button"
+                  class="bp5-button"
                   type="button"
                 >
                   <span
-                    class="bp4-button-text"
+                    class="bp5-button-text"
                   >
                     JSON
                   </span>
@@ -111,10 +114,10 @@ exports[`RetentionDialog matches snapshot 1`] = `
               class="rule-form-content"
             >
               <div
-                class="bp4-form-group"
+                class="bp5-form-group"
               >
                 <div
-                  class="bp4-form-content"
+                  class="bp5-form-content"
                 >
                   <div
                     class="rule-editor"
@@ -123,83 +126,58 @@ exports[`RetentionDialog matches snapshot 1`] = `
                       class="title"
                     >
                       <button
-                        class="bp4-button bp4-minimal left"
+                        class="bp5-button bp5-minimal left"
                         type="button"
                       >
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           loadByPeriod(P1000Y+future, 2x)
                         </span>
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-caret-down"
-                          icon="caret-down"
-                        >
-                          <svg
-                            data-icon="caret-down"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                          data-icon="caret-down"
+                        />
                       </button>
                       <div
                         class="spacer"
                       />
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                         type="button"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-trash"
-                          icon="trash"
-                        >
-                          <svg
-                            data-icon="trash"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          class="bp5-icon bp5-icon-standard bp5-icon-trash"
+                          data-icon="trash"
+                        />
                       </button>
                     </div>
                     <div
-                      class="bp4-collapse"
+                      class="bp5-collapse"
                       style="height: auto; overflow-y: visible; transition: none;"
                     >
                       <div
                         aria-hidden="false"
-                        class="bp4-collapse-body"
+                        class="bp5-collapse-body"
                         style="transform: translateY(0); transition: none;"
                       >
                         <div
-                          class="bp4-card bp4-elevation-2"
+                          class="bp5-card bp5-elevation-2"
                         >
                           <div
-                            class="bp4-form-group"
+                            class="bp5-form-group"
                           >
                             <div
-                              class="bp4-form-content"
+                              class="bp5-form-content"
                             >
                               <div
-                                class="bp4-control-group"
+                                class="bp5-control-group"
+                                role="group"
                               >
                                 <div
-                                  class="bp4-html-select"
+                                  class="bp5-html-select"
                                 >
                                   <select>
                                     <option
@@ -254,25 +232,23 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     </option>
                                   </select>
                                   <span
-                                    class="bp4-icon bp4-icon-double-caret-vertical"
-                                    icon="double-caret-vertical"
+                                    class="bp5-icon bp5-icon-double-caret-vertical"
                                   >
                                     <svg
-                                      aria-labelledby="iconTitle-3"
                                       data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
-                                      <title
-                                        id="iconTitle-3"
-                                      >
+                                      <title>
                                         Open dropdown
                                       </title>
                                       <path
-                                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                        d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                                         fill-rule="evenodd"
+                                        style="transform-origin: center;"
+                                        transform="scale(0.05, -0.05) translate(-160, -160)"
                                       />
                                     </svg>
                                   </span>
@@ -281,58 +257,47 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                   class="formatted-input suggestible-input"
                                 >
                                   <div
-                                    class="bp4-input-group"
+                                    class="bp5-input-group"
                                   >
                                     <input
-                                      class="bp4-input"
+                                      aria-disabled="false"
+                                      class="bp5-input"
                                       placeholder="P1D"
                                       style="padding-right: 0px;"
                                       type="text"
                                       value="P1000Y"
                                     />
                                     <span
-                                      class="bp4-input-action"
+                                      class="bp5-input-action"
                                     >
                                       <span
-                                        aria-haspopup="true"
-                                        class="bp4-popover2-target"
+                                        class="bp5-popover2-target bp5-popover-target"
                                       >
                                         <button
-                                          class="bp4-button bp4-minimal"
+                                          aria-expanded="false"
+                                          aria-haspopup="menu"
+                                          class="bp5-button bp5-minimal"
                                           type="button"
                                         >
                                           <span
                                             aria-hidden="true"
-                                            class="bp4-icon bp4-icon-caret-down"
-                                            icon="caret-down"
-                                          >
-                                            <svg
-                                              data-icon="caret-down"
-                                              height="16"
-                                              role="img"
-                                              viewBox="0 0 16 16"
-                                              width="16"
-                                            >
-                                              <path
-                                                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                                                fill-rule="evenodd"
-                                              />
-                                            </svg>
-                                          </span>
+                                            class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                                            data-icon="caret-down"
+                                          />
                                         </button>
                                       </span>
                                     </span>
                                   </div>
                                 </div>
                                 <label
-                                  class="bp4-control bp4-switch include-future"
+                                  class="bp5-control bp5-switch include-future"
                                 >
                                   <input
                                     checked=""
                                     type="checkbox"
                                   />
                                   <span
-                                    class="bp4-control-indicator"
+                                    class="bp5-control-indicator"
                                   />
                                   Include future
                                 </label>
@@ -340,27 +305,28 @@ exports[`RetentionDialog matches snapshot 1`] = `
                             </div>
                           </div>
                           <div
-                            class="bp4-form-group"
+                            class="bp5-form-group"
                           >
                             <div
-                              class="bp4-form-content"
+                              class="bp5-form-content"
                             >
                               <div
-                                class="bp4-control-group"
+                                class="bp5-control-group"
+                                role="group"
                               >
                                 <button
-                                  class="bp4-button bp4-minimal"
+                                  class="bp5-button bp5-minimal"
                                   style="pointer-events: none;"
                                   type="button"
                                 >
                                   <span
-                                    class="bp4-button-text"
+                                    class="bp5-button-text"
                                   >
                                     Tier:
                                   </span>
                                 </button>
                                 <div
-                                  class="bp4-html-select bp4-fill"
+                                  class="bp5-html-select bp5-fill"
                                 >
                                   <select>
                                     <option
@@ -370,52 +336,52 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     </option>
                                   </select>
                                   <span
-                                    class="bp4-icon bp4-icon-double-caret-vertical"
-                                    icon="double-caret-vertical"
+                                    class="bp5-icon bp5-icon-double-caret-vertical"
                                   >
                                     <svg
-                                      aria-labelledby="iconTitle-5"
                                       data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
-                                      <title
-                                        id="iconTitle-5"
-                                      >
+                                      <title>
                                         Open dropdown
                                       </title>
                                       <path
-                                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                        d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                                         fill-rule="evenodd"
+                                        style="transform-origin: center;"
+                                        transform="scale(0.05, -0.05) translate(-160, -160)"
                                       />
                                     </svg>
                                   </span>
                                 </div>
                                 <button
-                                  class="bp4-button bp4-minimal"
+                                  class="bp5-button bp5-minimal"
                                   style="pointer-events: none;"
                                   type="button"
                                 >
                                   <span
-                                    class="bp4-button-text"
+                                    class="bp5-button-text"
                                   >
                                     Replicants:
                                   </span>
                                 </button>
                                 <div
-                                  class="bp4-control-group bp4-numeric-input"
+                                  class="bp5-control-group bp5-numeric-input"
+                                  role="group"
                                 >
                                   <div
-                                    class="bp4-input-group"
+                                    class="bp5-input-group"
                                   >
                                     <input
+                                      aria-disabled="false"
                                       aria-valuemax="256"
                                       aria-valuemin="0"
                                       aria-valuenow="2"
                                       autocomplete="off"
-                                      class="bp4-input"
+                                      class="bp5-input"
                                       id="numericInput-0"
                                       max="256"
                                       min="0"
@@ -425,18 +391,17 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     />
                                   </div>
                                   <div
-                                    class="bp4-button-group bp4-vertical bp4-fixed"
+                                    class="bp5-button-group bp5-vertical bp5-fixed"
                                   >
                                     <button
                                       aria-controls="numericInput-0"
                                       aria-label="increment"
-                                      class="bp4-button"
+                                      class="bp5-button"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-up"
-                                        icon="chevron-up"
+                                        class="bp5-icon bp5-icon-chevron-up"
                                       >
                                         <svg
                                           data-icon="chevron-up"
@@ -446,8 +411,10 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                           width="16"
                                         >
                                           <path
-                                            d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                            d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                                             fill-rule="evenodd"
+                                            style="transform-origin: center;"
+                                            transform="scale(0.05, -0.05) translate(-160, -160)"
                                           />
                                         </svg>
                                       </span>
@@ -455,13 +422,12 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     <button
                                       aria-controls="numericInput-0"
                                       aria-label="decrement"
-                                      class="bp4-button"
+                                      class="bp5-button"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-down"
-                                        icon="chevron-down"
+                                        class="bp5-icon bp5-icon-chevron-down"
                                       >
                                         <svg
                                           data-icon="chevron-down"
@@ -471,8 +437,10 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                           width="16"
                                         >
                                           <path
-                                            d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                            d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                                             fill-rule="evenodd"
+                                            style="transform-origin: center;"
+                                            transform="scale(0.05, -0.05) translate(-160, -160)"
                                           />
                                         </svg>
                                       </span>
@@ -480,39 +448,26 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                   </div>
                                 </div>
                                 <button
-                                  class="bp4-button"
+                                  class="bp5-button"
                                   type="button"
                                 >
                                   <span
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-trash"
-                                    icon="trash"
-                                  >
-                                    <svg
-                                      data-icon="trash"
-                                      height="16"
-                                      role="img"
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                    >
-                                      <path
-                                        d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
-                                        fill-rule="evenodd"
-                                      />
-                                    </svg>
-                                  </span>
+                                    class="bp5-icon bp5-icon-standard bp5-icon-trash"
+                                    data-icon="trash"
+                                  />
                                 </button>
                               </div>
                             </div>
                           </div>
                           <div
-                            class="bp4-form-group"
+                            class="bp5-form-group"
                           >
                             <div
-                              class="bp4-form-content"
+                              class="bp5-form-content"
                             >
                               <button
-                                class="bp4-button bp4-disabled bp4-minimal"
+                                class="bp5-button bp5-disabled bp5-minimal"
                                 disabled=""
                                 tabindex="-1"
                                 title="There are no tiers left to assign"
@@ -520,24 +475,11 @@ exports[`RetentionDialog matches snapshot 1`] = `
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="bp4-icon bp4-icon-plus"
-                                  icon="plus"
-                                >
-                                  <svg
-                                    data-icon="plus"
-                                    height="16"
-                                    role="img"
-                                    viewBox="0 0 16 16"
-                                    width="16"
-                                  >
-                                    <path
-                                      d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-                                      fill-rule="evenodd"
-                                    />
-                                  </svg>
-                                </span>
+                                  class="bp5-icon bp5-icon-standard bp5-icon-plus"
+                                  data-icon="plus"
+                                />
                                 <span
-                                  class="bp4-button-text"
+                                  class="bp5-button-text"
                                 >
                                   Add historical tier replication
                                 </span>
@@ -550,29 +492,16 @@ exports[`RetentionDialog matches snapshot 1`] = `
                   </div>
                   <div>
                     <button
-                      class="bp4-button"
+                      class="bp5-button"
                       type="button"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-plus"
-                        icon="plus"
-                      >
-                        <svg
-                          data-icon="plus"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        class="bp5-icon bp5-icon-standard bp5-icon-plus"
+                        data-icon="plus"
+                      />
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         New rule
                       </span>
@@ -581,13 +510,13 @@ exports[`RetentionDialog matches snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="bp4-divider"
+                class="bp5-divider"
               />
               <div
-                class="bp4-form-group"
+                class="bp5-form-group"
               >
                 <label
-                  class="bp4-label"
+                  class="bp5-label"
                 >
                   Cluster defaults (
                   <a>
@@ -596,11 +525,11 @@ exports[`RetentionDialog matches snapshot 1`] = `
                   )
                    
                   <span
-                    class="bp4-text-muted"
+                    class="bp5-text-muted"
                   />
                 </label>
                 <div
-                  class="bp4-form-content"
+                  class="bp5-form-content"
                 >
                   <p>
                     The cluster default rules are evaluated if none of the above rules match.
@@ -612,60 +541,48 @@ exports[`RetentionDialog matches snapshot 1`] = `
                       class="title"
                     >
                       <button
-                        class="bp4-button bp4-minimal left"
+                        class="bp5-button bp5-minimal left"
                         type="button"
                       >
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           loadForever(2x)
                         </span>
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-caret-down"
-                          icon="caret-down"
-                        >
-                          <svg
-                            data-icon="caret-down"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                          data-icon="caret-down"
+                        />
                       </button>
                       <div
                         class="spacer"
                       />
                     </div>
                     <div
-                      class="bp4-collapse"
+                      class="bp5-collapse"
                       style="height: auto; overflow-y: visible; transition: none;"
                     >
                       <div
                         aria-hidden="false"
-                        class="bp4-collapse-body"
+                        class="bp5-collapse-body"
                         style="transform: translateY(0); transition: none;"
                       >
                         <div
-                          class="bp4-card bp4-elevation-2"
+                          class="bp5-card bp5-elevation-2"
                         >
                           <div
-                            class="bp4-form-group"
+                            class="bp5-form-group"
                           >
                             <div
-                              class="bp4-form-content"
+                              class="bp5-form-content"
                             >
                               <div
-                                class="bp4-control-group"
+                                class="bp5-control-group"
+                                role="group"
                               >
                                 <div
-                                  class="bp4-html-select bp4-disabled"
+                                  class="bp5-html-select bp5-disabled"
                                 >
                                   <select
                                     disabled=""
@@ -722,25 +639,23 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     </option>
                                   </select>
                                   <span
-                                    class="bp4-icon bp4-icon-double-caret-vertical"
-                                    icon="double-caret-vertical"
+                                    class="bp5-icon bp5-icon-double-caret-vertical"
                                   >
                                     <svg
-                                      aria-labelledby="iconTitle-12"
                                       data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
-                                      <title
-                                        id="iconTitle-12"
-                                      >
+                                      <title>
                                         Open dropdown
                                       </title>
                                       <path
-                                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                        d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                                         fill-rule="evenodd"
+                                        style="transform-origin: center;"
+                                        transform="scale(0.05, -0.05) translate(-160, -160)"
                                       />
                                     </svg>
                                   </span>
@@ -749,29 +664,30 @@ exports[`RetentionDialog matches snapshot 1`] = `
                             </div>
                           </div>
                           <div
-                            class="bp4-form-group"
+                            class="bp5-form-group"
                           >
                             <div
-                              class="bp4-form-content"
+                              class="bp5-form-content"
                             >
                               <div
-                                class="bp4-control-group"
+                                class="bp5-control-group"
+                                role="group"
                               >
                                 <button
-                                  class="bp4-button bp4-disabled bp4-minimal"
+                                  class="bp5-button bp5-disabled bp5-minimal"
                                   disabled=""
                                   style="pointer-events: none;"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="bp4-button-text"
+                                    class="bp5-button-text"
                                   >
                                     Tier:
                                   </span>
                                 </button>
                                 <div
-                                  class="bp4-html-select bp4-disabled bp4-fill"
+                                  class="bp5-html-select bp5-disabled bp5-fill"
                                 >
                                   <select
                                     disabled=""
@@ -783,54 +699,54 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     </option>
                                   </select>
                                   <span
-                                    class="bp4-icon bp4-icon-double-caret-vertical"
-                                    icon="double-caret-vertical"
+                                    class="bp5-icon bp5-icon-double-caret-vertical"
                                   >
                                     <svg
-                                      aria-labelledby="iconTitle-13"
                                       data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
-                                      <title
-                                        id="iconTitle-13"
-                                      >
+                                      <title>
                                         Open dropdown
                                       </title>
                                       <path
-                                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                        d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
                                         fill-rule="evenodd"
+                                        style="transform-origin: center;"
+                                        transform="scale(0.05, -0.05) translate(-160, -160)"
                                       />
                                     </svg>
                                   </span>
                                 </div>
                                 <button
-                                  class="bp4-button bp4-disabled bp4-minimal"
+                                  class="bp5-button bp5-disabled bp5-minimal"
                                   disabled=""
                                   style="pointer-events: none;"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    class="bp4-button-text"
+                                    class="bp5-button-text"
                                   >
                                     Replicants:
                                   </span>
                                 </button>
                                 <div
-                                  class="bp4-control-group bp4-numeric-input"
+                                  class="bp5-control-group bp5-numeric-input"
+                                  role="group"
                                 >
                                   <div
-                                    class="bp4-input-group bp4-disabled"
+                                    class="bp5-input-group bp5-disabled"
                                   >
                                     <input
+                                      aria-disabled="true"
                                       aria-valuemax="256"
                                       aria-valuemin="0"
                                       aria-valuenow="2"
                                       autocomplete="off"
-                                      class="bp4-input"
+                                      class="bp5-input"
                                       disabled=""
                                       id="numericInput-1"
                                       max="256"
@@ -841,20 +757,19 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     />
                                   </div>
                                   <div
-                                    class="bp4-button-group bp4-vertical bp4-fixed"
+                                    class="bp5-button-group bp5-vertical bp5-fixed"
                                   >
                                     <button
                                       aria-controls="numericInput-1"
                                       aria-label="increment"
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-up"
-                                        icon="chevron-up"
+                                        class="bp5-icon bp5-icon-chevron-up"
                                       >
                                         <svg
                                           data-icon="chevron-up"
@@ -864,8 +779,10 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                           width="16"
                                         >
                                           <path
-                                            d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                            d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                                             fill-rule="evenodd"
+                                            style="transform-origin: center;"
+                                            transform="scale(0.05, -0.05) translate(-160, -160)"
                                           />
                                         </svg>
                                       </span>
@@ -873,15 +790,14 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                     <button
                                       aria-controls="numericInput-1"
                                       aria-label="decrement"
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-down"
-                                        icon="chevron-down"
+                                        class="bp5-icon bp5-icon-chevron-down"
                                       >
                                         <svg
                                           data-icon="chevron-down"
@@ -891,8 +807,10 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                           width="16"
                                         >
                                           <path
-                                            d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                            d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                                             fill-rule="evenodd"
+                                            style="transform-origin: center;"
+                                            transform="scale(0.05, -0.05) translate(-160, -160)"
                                           />
                                         </svg>
                                       </span>
@@ -912,65 +830,52 @@ exports[`RetentionDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-minimal left-align-button"
+              class="bp5-button bp5-minimal left-align-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 History
               </span>
             </button>
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Reset
               </span>
             </button>
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Next
               </span>
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-arrow-right"
-                icon="arrow-right"
-              >
-                <svg
-                  data-icon="arrow-right"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M14.7 7.29l-5-5a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 001.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-arrow-right"
+                data-icon="arrow-right"
+              />
             </button>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
index b47c8b634676..3f38bd1bc501 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
@@ -2,119 +2,96 @@
 
 exports[`SegmentTableActionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Segment: test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-intent-primary tab-button"
+              class="bp5-button bp5-intent-primary tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-manually-entered-data"
-                icon="manually-entered-data"
-              >
-                <svg
-                  data-icon="manually-entered-data"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M1 12h4.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zm16.77-3.94l1.65-1.65c.36-.36.58-.86.58-1.41 0-1.1-.9-2-2-2-.55 0-1.05.22-1.41.59l-1.65 1.65 2.83 2.82zM1 4h12.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zM0 15c0 .55.45 1 1 1h.34l2-2H1c-.55 0-1 .45-1 1zm1-7h8.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zm18 2h-.34l-2 2H19c.55 0 1-.45 1-1s-.45-1-1-1zm0 4h-4.34l-2 2H19c.55 0 1-.45 1-1s-.45-1-1-1zM4 19l4.41-1.59-2.81-2.79L4 19zM14.23 5.94l-7.65 7.65 2.83 2.83 7.65-7.65-2.83-2.83z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-manually-entered-data"
+                data-icon="manually-entered-data"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Metadata
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-th"
-                icon="th"
-              >
-                <svg
-                  data-icon="th"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-th"
+                data-icon="th"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Records
               </span>
@@ -130,40 +107,40 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
                 class="top-actions"
               >
                 <div
-                  class="bp4-button-group right-buttons"
+                  class="bp5-button-group right-buttons"
                 >
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Download
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Copy
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       View raw
                     </span>
@@ -211,72 +188,47 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="footer-actions-left"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-wrench"
-                  icon="wrench"
-                >
-                  <svg
-                    data-icon="wrench"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
+                  data-icon="wrench"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Actions
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-caret-down"
-                  icon="caret-down"
-                >
-                  <svg
-                    data-icon="caret-down"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                  data-icon="caret-down"
+                />
               </button>
             </span>
           </div>
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -286,7 +238,7 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
index 391fe3e018e4..cb35a8931748 100644
--- a/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
@@ -2,111 +2,101 @@
 
 exports[`ShowValueDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog show-value-dialog normal"
+        aria-modal="true"
+        class="bp5-dialog show-value-dialog normal"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Full value
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <textarea
-            class="bp4-input"
+            class="bp5-input bp5-text-area"
             spellcheck="false"
           >
             Bot: Automatska zamjena teksta  (-[[Administrativna podjela Meksika|Admin]] +[[Administrativna podjela Meksika|Admi]])
           </textarea>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-duplicate"
-                icon="duplicate"
-              >
-                <svg
-                  data-icon="duplicate"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-duplicate"
+                data-icon="duplicate"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Copy
               </span>
             </button>
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -116,7 +106,7 @@ exports[`ShowValueDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap b/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
index f74a8ae2b0ec..0ab72c0e9ef6 100644
--- a/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
@@ -2,104 +2,94 @@
 
 exports[`SnitchDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog snitch-dialog"
+        aria-modal="true"
+        class="bp5-dialog snitch-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Be snitchin
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         />
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Next
               </span>
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-arrow-right"
-                icon="arrow-right"
-              >
-                <svg
-                  data-icon="arrow-right"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M14.7 7.29l-5-5a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 001.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-arrow-right"
+                data-icon="arrow-right"
+              />
             </button>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
@@ -108,93 +98,95 @@ exports[`SnitchDialog matches snapshot 1`] = `
 
 exports[`SnitchDialog matches snapshot with history 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-1"
-        class="bp4-dialog snitch-dialog"
+        aria-modal="true"
+        class="bp5-dialog snitch-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-1"
           >
             Be snitchin
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         />
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-minimal left-align-button"
+              class="bp5-button bp5-minimal left-align-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 History
               </span>
             </button>
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Next
               </span>
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-arrow-right"
-                icon="arrow-right"
+                class="bp5-icon bp5-icon-arrow-right"
               >
                 <svg
                   data-icon="arrow-right"
@@ -215,7 +207,7 @@ exports[`SnitchDialog matches snapshot with history 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/spec-dialog/__snapshots__/spec-dialog.spec.tsx.snap b/web-console/src/dialogs/spec-dialog/__snapshots__/spec-dialog.spec.tsx.snap
index cc0971648e63..a709b06a68eb 100644
--- a/web-console/src/dialogs/spec-dialog/__snapshots__/spec-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/spec-dialog/__snapshots__/spec-dialog.spec.tsx.snap
@@ -2,56 +2,59 @@
 
 exports[`SpecDialog matches snapshot no initSpec 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog spec-dialog"
+        aria-modal="true"
+        class="bp5-dialog spec-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
@@ -155,29 +158,29 @@ exports[`SpecDialog matches snapshot no initSpec 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
             </button>
             <button
-              class="bp4-button bp4-disabled bp4-intent-primary"
+              class="bp5-button bp5-disabled bp5-intent-primary"
               disabled=""
               tabindex="-1"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Submit
               </span>
@@ -187,7 +190,7 @@ exports[`SpecDialog matches snapshot no initSpec 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
@@ -196,56 +199,59 @@ exports[`SpecDialog matches snapshot no initSpec 1`] = `
 
 exports[`SpecDialog matches snapshot with initSpec 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-1"
-        class="bp4-dialog spec-dialog"
+        aria-modal="true"
+        class="bp5-dialog spec-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-1"
           >
             test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
@@ -343,27 +349,27 @@ exports[`SpecDialog matches snapshot with initSpec 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button"
+              class="bp5-button"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
             </button>
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Submit
               </span>
@@ -373,7 +379,7 @@ exports[`SpecDialog matches snapshot with initSpec 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/status-dialog/__snapshots__/status-dialog.spec.tsx.snap b/web-console/src/dialogs/status-dialog/__snapshots__/status-dialog.spec.tsx.snap
index 46155bed2be0..a3f14c26a7d4 100644
--- a/web-console/src/dialogs/status-dialog/__snapshots__/status-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/status-dialog/__snapshots__/status-dialog.spec.tsx.snap
@@ -2,63 +2,66 @@
 
 exports[`StatusDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog status-dialog"
+        aria-modal="true"
+        class="bp5-dialog status-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Status
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="loader"
@@ -95,17 +98,17 @@ exports[`StatusDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="view-raw-button"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 View raw
               </span>
@@ -115,11 +118,11 @@ exports[`StatusDialog matches snapshot 1`] = `
             class="close-button"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -129,7 +132,7 @@ exports[`StatusDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
index 68cef1ace6ea..d37337829e6d 100755
--- a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
@@ -2,175 +2,126 @@
 
 exports[`SupervisorTableActionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Supervisor: test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-intent-primary tab-button"
+              class="bp5-button bp5-intent-primary tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-dashboard"
-                icon="dashboard"
-              >
-                <svg
-                  data-icon="dashboard"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM4 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6-4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-5C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-8 5c0 1.1.9 2 2 2s2-.9 2-2c0-.33-2-8-2-8s-2 7.67-2 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-dashboard"
+                data-icon="dashboard"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Status
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-chart"
-                icon="chart"
-              >
-                <svg
-                  data-icon="chart"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M7 11v8c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-8l-2 2-4-2zm-7 8c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-8l-6 3v5zM17 7l-3 3v9c0 .55.45 1 1 1h4c.55 0 1-.45 1-1V8.74c-.26.15-.58.26-1 .26-1.92 0-2-2-2-2zm2-6h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L10.8 8.78 7.45 7.11v.01C7.31 7.05 7.16 7 7 7s-.31.05-.44.11V7.1l-6 3v.01c-.33.17-.56.5-.56.89 0 .55.45 1 1 1 .16 0 .31-.05.44-.11v.01L7 9.12l3.55 1.78v-.01c.14.06.29.11.45.11.28 0 .53-.11.71-.29L18 4.41V6c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-chart"
+                data-icon="chart"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Task stats
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-align-left"
-                icon="align-left"
-              >
-                <svg
-                  data-icon="align-left"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-align-left"
+                data-icon="align-left"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Spec
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-history"
-                icon="history"
-              >
-                <svg
-                  data-icon="history"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M10 0C6.71 0 3.82 1.6 2 4.05V2c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.76C5.23 3.17 7.47 2 10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8c0-.55-.45-1-1-1s-1 .45-1 1c0 5.52 4.48 10 10 10s10-4.48 10-10S15.52 0 10 0zm0 3c-.55 0-1 .45-1 1v6c0 .28.11.53.29.71l3 3a1.003 1.003 0 001.42-1.42L11 9.59V4c0-.55-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-history"
+                data-icon="history"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 History
               </span>
@@ -186,40 +137,40 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
                 class="top-actions"
               >
                 <div
-                  class="bp4-button-group right-buttons"
+                  class="bp5-button-group right-buttons"
                 >
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Download
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Copy
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       View raw
                     </span>
@@ -267,72 +218,47 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="footer-actions-left"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-wrench"
-                  icon="wrench"
-                >
-                  <svg
-                    data-icon="wrench"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
+                  data-icon="wrench"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Actions
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-caret-down"
-                  icon="caret-down"
-                >
-                  <svg
-                    data-icon="caret-down"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                  data-icon="caret-down"
+                />
               </button>
             </span>
           </div>
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -342,7 +268,7 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
index 9f61d78e1ec5..eed264f3e700 100644
--- a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
@@ -7,16 +7,16 @@ exports[`SupervisorStatisticsTable matches snapshot on error 1`] = `
   <div
     className="top-actions"
   >
-    <Blueprint4.ButtonGroup
+    <Blueprint5.ButtonGroup
       className="right-buttons"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         minimal={true}
         onClick={[Function]}
         text="View raw"
       />
-    </Blueprint4.ButtonGroup>
+    </Blueprint5.ButtonGroup>
   </div>
   <div
     className="main-area"
@@ -190,16 +190,16 @@ exports[`SupervisorStatisticsTable matches snapshot on init 1`] = `
   <div
     className="top-actions"
   >
-    <Blueprint4.ButtonGroup
+    <Blueprint5.ButtonGroup
       className="right-buttons"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         minimal={true}
         onClick={[Function]}
         text="View raw"
       />
-    </Blueprint4.ButtonGroup>
+    </Blueprint5.ButtonGroup>
   </div>
   <div
     className="main-area"
@@ -373,16 +373,16 @@ exports[`SupervisorStatisticsTable matches snapshot on loading 1`] = `
   <div
     className="top-actions"
   >
-    <Blueprint4.ButtonGroup
+    <Blueprint5.ButtonGroup
       className="right-buttons"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={true}
         minimal={true}
         onClick={[Function]}
         text="View raw"
       />
-    </Blueprint4.ButtonGroup>
+    </Blueprint5.ButtonGroup>
   </div>
   <div
     className="main-area"
@@ -399,16 +399,16 @@ exports[`SupervisorStatisticsTable matches snapshot on no data 1`] = `
   <div
     className="top-actions"
   >
-    <Blueprint4.ButtonGroup
+    <Blueprint5.ButtonGroup
       className="right-buttons"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         minimal={true}
         onClick={[Function]}
         text="View raw"
       />
-    </Blueprint4.ButtonGroup>
+    </Blueprint5.ButtonGroup>
   </div>
   <div
     className="main-area"
@@ -582,16 +582,16 @@ exports[`SupervisorStatisticsTable matches snapshot on some data 1`] = `
   <div
     className="top-actions"
   >
-    <Blueprint4.ButtonGroup
+    <Blueprint5.ButtonGroup
       className="right-buttons"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={false}
         minimal={true}
         onClick={[Function]}
         text="View raw"
       />
-    </Blueprint4.ButtonGroup>
+    </Blueprint5.ButtonGroup>
   </div>
   <div
     className="main-area"
diff --git a/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
index 7fe2c13bd308..9f8921edf9e1 100644
--- a/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
@@ -2,91 +2,81 @@
 
 exports[`TableActionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Table dummy actions
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-badge"
-                icon="badge"
-              >
-                <svg
-                  data-icon="badge"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M16.94 5.73c-.19-1.41.62-2.52 1.38-3.59L17.03.65C14.89 1.76 11.88 1.48 10 0 8.12 1.48 5.11 1.76 2.97.65L1.68 2.14c.76 1.07 1.57 2.18 1.38 3.59C2.68 8.59 0 10.94 1.4 14.08c.56 1.43 1.81 2.37 3.4 2.75 1.95.46 4.4.91 5.2 3.17.8-2.26 3.25-2.71 5.2-3.17 1.6-.38 2.84-1.32 3.4-2.75 1.4-3.14-1.28-5.49-1.66-8.35z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-badge"
+                data-icon="badge"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 test
               </span>
@@ -97,17 +87,17 @@ exports[`TableActionDialog matches snapshot 1`] = `
           />
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -117,7 +107,7 @@ exports[`TableActionDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
index 63e1e50a8633..931f2ab7ffd6 100644
--- a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
@@ -2,175 +2,126 @@
 
 exports[`TaskTableActionDialog matches snapshot 1`] = `
 <div
-  class="bp4-portal"
+  class="bp5-portal"
 >
   <div
     aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
+    class="bp5-overlay bp5-overlay-open bp5-overlay-scroll-container"
   >
     <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-start-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
     <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-backdrop bp5-overlay-appear bp5-overlay-appear-active"
     />
     <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-dialog-container bp5-overlay-content bp5-overlay-appear bp5-overlay-appear-active"
+      tabindex="0"
     >
       <div
         aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog table-action-dialog"
+        aria-modal="true"
+        class="bp5-dialog table-action-dialog"
         role="dialog"
       >
         <div
-          class="bp4-dialog-header"
+          class="bp5-dialog-header"
         >
           <h6
-            class="bp4-heading"
+            class="bp5-heading"
             id="title-bp-dialog-0"
           >
             Task: test
           </h6>
           <button
             aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
+            class="bp5-button bp5-minimal bp5-dialog-close-button"
             type="button"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-cross"
-              icon="cross"
+              class="bp5-icon bp5-icon-small-cross"
             >
               <svg
-                data-icon="cross"
+                data-icon="small-cross"
                 height="16"
                 role="img"
                 viewBox="0 0 16 16"
                 width="16"
               >
                 <path
-                  d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+                  d="M188.2 160L234 205.8C237.8 209.4 240 214.4 240 220C240 231 231 240 220 240C214.4 240 209.4 237.8 205.8 234.2L160 188.2L114.2 234.2C110.6 237.8 105.6 240 100 240C89 240 80 231 80 220C80 214.4 82.2 209.4 85.8 205.8L131.8 160L86 114.2C82.2 110.6 80 105.6 80 100C80 89 89 80 100 80C105.6 80 110.6 82.2 114.2 85.8L160 131.8L205.8 86C209.4 82.2 214.4 80 220 80C231 80 240 89 240 100C240 105.6 237.8 110.6 234.2 114.2L188.2 160z"
                   fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
           </button>
         </div>
         <div
-          class="bp4-dialog-body"
+          class="bp5-dialog-body"
         >
           <div
             class="side-bar"
           >
             <button
-              class="bp4-button bp4-intent-primary tab-button"
+              class="bp5-button bp5-intent-primary tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-dashboard"
-                icon="dashboard"
-              >
-                <svg
-                  data-icon="dashboard"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM4 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6-4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-5C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-8 5c0 1.1.9 2 2 2s2-.9 2-2c0-.33-2-8-2-8s-2 7.67-2 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-dashboard"
+                data-icon="dashboard"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Status
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-comparison"
-                icon="comparison"
-              >
-                <svg
-                  data-icon="comparison"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M6 8H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm13-6h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 3h-5V3h5v2zM6 14H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1zM6 2H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm4-2c-.55 0-1 .45-1 1v18c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1zm9 14h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1zm0 3h-5v-2h5v2zm0-9h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm0 3h-5V9h5v2z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-comparison"
+                data-icon="comparison"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Reports
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-align-left"
-                icon="align-left"
-              >
-                <svg
-                  data-icon="align-left"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-align-left"
+                data-icon="align-left"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Spec
               </span>
             </button>
             <button
-              class="bp4-button bp4-minimal tab-button"
+              class="bp5-button bp5-minimal tab-button"
               type="button"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-align-justify"
-                icon="align-justify"
-              >
-                <svg
-                  data-icon="align-justify"
-                  height="20"
-                  role="img"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <path
-                    d="M1 3h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm18 14H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0-12H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0 4H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0 4H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-large bp5-icon-align-justify"
+                data-icon="align-justify"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Log
               </span>
@@ -186,40 +137,40 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
                 class="top-actions"
               >
                 <div
-                  class="bp4-button-group right-buttons"
+                  class="bp5-button-group right-buttons"
                 >
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Download
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       Copy
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-disabled bp4-minimal"
+                    class="bp5-button bp5-disabled bp5-minimal"
                     disabled=""
                     tabindex="-1"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       View raw
                     </span>
@@ -267,72 +218,47 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="bp4-dialog-footer"
+          class="bp5-dialog-footer"
         >
           <div
             class="footer-actions-left"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button"
+                aria-expanded="false"
+                aria-haspopup="menu"
+                class="bp5-button"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-wrench"
-                  icon="wrench"
-                >
-                  <svg
-                    data-icon="wrench"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
+                  data-icon="wrench"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Actions
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-caret-down"
-                  icon="caret-down"
-                >
-                  <svg
-                    data-icon="caret-down"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                  data-icon="caret-down"
+                />
               </button>
             </span>
           </div>
           <div
-            class="bp4-dialog-footer-actions"
+            class="bp5-dialog-footer-actions"
           >
             <button
-              class="bp4-button bp4-intent-primary"
+              class="bp5-button bp5-intent-primary"
               type="button"
             >
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Close
               </span>
@@ -342,7 +268,7 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
+      class="bp5-overlay-end-focus-trap bp5-overlay-appear bp5-overlay-appear-active"
       tabindex="0"
     />
   </div>
diff --git a/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap b/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
index b627b2e500ce..47dd15ff05ea 100644
--- a/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
+++ b/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`DatasourcesView matches snapshot 1`] = `
     />
     <Memo(MoreButton)
       altExtra={
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="compressed"
@@ -22,42 +22,39 @@ exports[`DatasourcesView matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Force compaction run"
         />
       }
     >
-      <Blueprint4.MenuItem
+      <Blueprint5.MenuItem
         active={false}
         disabled={true}
         icon="application"
         multiline={false}
         onClick={[Function]}
         popoverProps={{}}
-        selected={false}
         shouldDismissPopover={true}
         text="View SQL query for table"
       />
-      <Blueprint4.MenuItem
+      <Blueprint5.MenuItem
         active={false}
         disabled={false}
         icon="edit"
         multiline={false}
         onClick={[Function]}
         popoverProps={{}}
-        selected={false}
         shouldDismissPopover={true}
         text="Edit default retention rules"
       />
     </Memo(MoreButton)>
-    <Blueprint4.Switch
+    <Blueprint5.Switch
       checked={false}
       disabled={false}
       label="Show unused"
       onChange={[Function]}
     />
-    <Blueprint4.Switch
+    <Blueprint5.Switch
       checked={false}
       disabled={false}
       label="Show segment timeline"
diff --git a/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap b/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
index b6012dde1288..a3b801d37bf4 100644
--- a/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`DatasourcesCard matches snapshot 1`] = `
   href="#datasources"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-multi-select"
-        icon="multi-select"
-      >
-        <svg
-          data-icon="multi-select"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M12 3.98H4c-.55 0-1 .45-1 1v1h8v5h1c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm3-3H7c-.55 0-1 .45-1 1v1h8v5h1c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm-6 6H1c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm-1 5H2v-3h6v3z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-multi-select"
+        data-icon="multi-select"
+      />
        
       Datasources
     </h5>
diff --git a/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap b/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
index e4a75455e7f9..8f5843e0def1 100644
--- a/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`HomeViewCard matches snapshot 1`] = `
   href="#somewhere"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-database"
-        icon="database"
-      >
-        <svg
-          data-icon="database"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8 4c3.31 0 6-.9 6-2s-2.69-2-6-2C4.68 0 2 .9 2 2s2.68 2 6 2zm-6-.48V8c0 1.1 2.69 2 6 2s6-.9 6-2V3.52C12.78 4.4 10.56 5 8 5s-4.78-.6-6-1.48zm0 6V14c0 1.1 2.69 2 6 2s6-.9 6-2V9.52C12.78 10.4 10.56 11 8 11s-4.78-.6-6-1.48z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-database"
+        data-icon="database"
+      />
        
       Something
     </h5>
diff --git a/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap b/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
index 01e742c876c5..4868b6d1a209 100644
--- a/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`LookupsCard matches snapshot 1`] = `
   href="#lookups"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-properties"
-        icon="properties"
-      >
-        <svg
-          data-icon="properties"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-3h9c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm-4 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm13-5H6c-.55 0-1 .45-1 1s.45 1 1 1h9c.55 0 1-.45 1-1s-.45-1-1-1zm0 6H6c-.55 0-1 .45-1 1s.45 1 1 1h9c.55 0 1-.45 1-1s-.45-1-1-1zM2 0C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-properties"
+        data-icon="properties"
+      />
        
       Lookups
     </h5>
diff --git a/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap b/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
index 6d1054df58da..fd87fb456622 100644
--- a/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`SegmentsCard matches snapshot 1`] = `
   href="#segments"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-stacked-chart"
-        icon="stacked-chart"
-      >
-        <svg
-          data-icon="stacked-chart"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M10 2c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v3h3V2zm3 10h1c.55 0 1-.45 1-1V8h-3v3c0 .55.45 1 1 1zm2-7c0-.55-.45-1-1-1h-1c-.55 0-1 .45-1 1v2h3V5zm-5 1H7v3h3V6zM5 7c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v1h3V7zm3 5h1c.55 0 1-.45 1-1v-1H7v1c0 .55.45 1 1 1zm7 1H2c-.55 0-1 .45-1 1s.45 1 1 1h13c.55 0 1-.45 1-1s-.45-1-1-1zM3 12h1c.55 0 1-.45 1-1V9H2v2c0 .55.45 1 1 1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-stacked-chart"
+        data-icon="stacked-chart"
+      />
        
       Segments
     </h5>
diff --git a/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap b/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
index 7c6ebd9a2991..1a28396e2a61 100644
--- a/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`ServicesCard matches snapshot 1`] = `
   href="#services"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-database"
-        icon="database"
-      >
-        <svg
-          data-icon="database"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8 4c3.31 0 6-.9 6-2s-2.69-2-6-2C4.68 0 2 .9 2 2s2.68 2 6 2zm-6-.48V8c0 1.1 2.69 2 6 2s6-.9 6-2V3.52C12.78 4.4 10.56 5 8 5s-4.78-.6-6-1.48zm0 6V14c0 1.1 2.69 2 6 2s6-.9 6-2V9.52C12.78 10.4 10.56 11 8 11s-4.78-.6-6-1.48z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-database"
+        data-icon="database"
+      />
        
       Services
     </h5>
diff --git a/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap b/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
index f65933246100..414fbdc73b09 100644
--- a/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
@@ -5,30 +5,16 @@ exports[`StatusCard matches snapshot 1`] = `
   class="home-view-card status-card"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-graph"
-        icon="graph"
-      >
-        <svg
-          data-icon="graph"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M14 3c-1.06 0-1.92.83-1.99 1.88l-1.93.97A2.95 2.95 0 008 5c-.56 0-1.08.16-1.52.43L3.97 3.34C3.98 3.23 4 3.12 4 3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.24 0 .47-.05.68-.13l2.51 2.09C5.08 7.29 5 7.63 5 8c0 .96.46 1.81 1.16 2.35l-.56 1.69c-.91.19-1.6.99-1.6 1.96 0 1.1.9 2 2 2s2-.9 2-2c0-.51-.2-.97-.51-1.32l.56-1.69A2.99 2.99 0 0011 8c0-.12-.02-.24-.04-.36l1.94-.97c.32.21.69.33 1.1.33 1.1 0 2-.9 2-2s-.9-2-2-2z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-graph"
+        data-icon="graph"
+      />
        
       Status
     </h5>
diff --git a/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap b/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
index 81653bae7dec..292932aeb3e4 100644
--- a/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`SupervisorsCard matches snapshot 1`] = `
   href="#supervisors"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-eye-open"
-        icon="eye-open"
-      >
-        <svg
-          data-icon="eye-open"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-eye-open"
+        data-icon="eye-open"
+      />
        
       Supervisors
     </h5>
diff --git a/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap b/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
index b950011b4eb5..aa41392318c8 100644
--- a/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
@@ -6,30 +6,16 @@ exports[`TasksCard matches snapshot 1`] = `
   href="#tasks"
 >
   <div
-    class="bp4-card bp4-interactive bp4-elevation-1"
+    class="bp5-card bp5-elevation-1 bp5-interactive"
   >
     <h5
-      class="bp4-heading"
+      class="bp5-heading"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-gantt-chart"
-        icon="gantt-chart"
-      >
-        <svg
-          data-icon="gantt-chart"
-          fill="#bfccd5"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M10 10c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1zM6 7c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1zm9 5H2V3c0-.55-.45-1-1-1s-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zM4 5h3c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-gantt-chart"
+        data-icon="gantt-chart"
+      />
        
       Tasks
     </h5>
diff --git a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
index 6bbafa818c0c..ec7b8bd28f8e 100644
--- a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
@@ -18,10 +18,10 @@ exports[`LoadDataView matches snapshot batch 1`] = `
         >
           Connect and parse raw data
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={true}
             className="welcome"
             disabled={false}
@@ -29,7 +29,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Start"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="connect"
             disabled={true}
@@ -37,7 +37,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Connect"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="parser"
             disabled={true}
@@ -45,7 +45,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Parse data"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -55,10 +55,10 @@ exports[`LoadDataView matches snapshot batch 1`] = `
         >
           Transform data and configure schema
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="timestamp"
             disabled={true}
@@ -66,7 +66,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Parse time"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="transform"
             disabled={true}
@@ -74,7 +74,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Transform"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="filter"
             disabled={true}
@@ -82,7 +82,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Filter"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="schema"
             disabled={true}
@@ -90,7 +90,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Configure schema"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -100,10 +100,10 @@ exports[`LoadDataView matches snapshot batch 1`] = `
         >
           Tune parameters
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="partition"
             disabled={true}
@@ -111,7 +111,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Partition"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="tuning"
             disabled={true}
@@ -119,7 +119,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Tune"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="publish"
             disabled={true}
@@ -127,7 +127,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Publish"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -137,10 +137,10 @@ exports[`LoadDataView matches snapshot batch 1`] = `
         >
           Verify and submit
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="spec"
             disabled={false}
@@ -148,7 +148,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             onClick={[Function]}
             text="Edit spec"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
     </div>
   </div>
@@ -160,7 +160,7 @@ exports[`LoadDataView matches snapshot batch 1`] = `
         className="ingestion-cards"
       >
         <React.Fragment>
-          <Blueprint4.Card
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -173,8 +173,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Amazon S3
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -187,8 +187,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Azure Data Lake
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -201,8 +201,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Google Cloud Storage
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -215,8 +215,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Delta Lake
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -229,8 +229,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               HDFS
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -243,8 +243,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Reindex from Druid
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -257,8 +257,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               HTTP(s)
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -271,8 +271,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Local disk
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -285,8 +285,8 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Paste data
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -299,9 +299,9 @@ exports[`LoadDataView matches snapshot batch 1`] = `
             <p>
               Example data
             </p>
-          </Blueprint4.Card>
+          </Blueprint5.Card>
         </React.Fragment>
-        <Blueprint4.Card
+        <Blueprint5.Card
           className="ingestion-card"
           elevation={1}
           interactive={true}
@@ -314,19 +314,19 @@ exports[`LoadDataView matches snapshot batch 1`] = `
           <p>
             Other
           </p>
-        </Blueprint4.Card>
+        </Blueprint5.Card>
       </div>
     </div>
     <div
       className="control"
     >
-      <Blueprint4.FormGroup>
-        <Blueprint4.Callout>
+      <Blueprint5.FormGroup>
+        <Blueprint5.Callout>
           <p>
             Please specify where your raw data is located.
           </p>
-        </Blueprint4.Callout>
-      </Blueprint4.FormGroup>
+        </Blueprint5.Callout>
+      </Blueprint5.FormGroup>
     </div>
   </React.Fragment>
 </div>
@@ -350,10 +350,10 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
         >
           Connect and parse raw data
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={true}
             className="welcome"
             disabled={false}
@@ -361,7 +361,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Start"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="connect"
             disabled={true}
@@ -369,7 +369,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Connect"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="parser"
             disabled={true}
@@ -377,7 +377,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Parse data"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -387,10 +387,10 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
         >
           Transform data and configure schema
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="timestamp"
             disabled={true}
@@ -398,7 +398,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Parse time"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="transform"
             disabled={true}
@@ -406,7 +406,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Transform"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="filter"
             disabled={true}
@@ -414,7 +414,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Filter"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="schema"
             disabled={true}
@@ -422,7 +422,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Configure schema"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -432,10 +432,10 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
         >
           Tune parameters
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="partition"
             disabled={true}
@@ -443,7 +443,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Partition"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="tuning"
             disabled={true}
@@ -451,7 +451,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Tune"
           />
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="publish"
             disabled={true}
@@ -459,7 +459,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Publish"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
       <div
         className="step-section"
@@ -469,10 +469,10 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
         >
           Verify and submit
         </div>
-        <Blueprint4.ButtonGroup
+        <Blueprint5.ButtonGroup
           className="step-nav-l2"
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             active={false}
             className="spec"
             disabled={false}
@@ -480,7 +480,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             onClick={[Function]}
             text="Edit spec"
           />
-        </Blueprint4.ButtonGroup>
+        </Blueprint5.ButtonGroup>
       </div>
     </div>
   </div>
@@ -492,7 +492,7 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
         className="ingestion-cards"
       >
         <React.Fragment>
-          <Blueprint4.Card
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -505,8 +505,8 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             <p>
               Apache Kafka
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -519,8 +519,8 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             <p>
               Amazon Kinesis
             </p>
-          </Blueprint4.Card>
-          <Blueprint4.Card
+          </Blueprint5.Card>
+          <Blueprint5.Card
             className="ingestion-card"
             elevation={1}
             interactive={true}
@@ -533,9 +533,9 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
             <p>
               Azure Event Hub
             </p>
-          </Blueprint4.Card>
+          </Blueprint5.Card>
         </React.Fragment>
-        <Blueprint4.Card
+        <Blueprint5.Card
           className="ingestion-card"
           elevation={1}
           interactive={true}
@@ -548,19 +548,19 @@ exports[`LoadDataView matches snapshot streaming 1`] = `
           <p>
             Other
           </p>
-        </Blueprint4.Card>
+        </Blueprint5.Card>
       </div>
     </div>
     <div
       className="control"
     >
-      <Blueprint4.FormGroup>
-        <Blueprint4.Callout>
+      <Blueprint5.FormGroup>
+        <Blueprint5.Callout>
           <p>
             Please specify where your raw data is located.
           </p>
-        </Blueprint4.Callout>
-      </Blueprint4.FormGroup>
+        </Blueprint5.Callout>
+      </Blueprint5.FormGroup>
     </div>
   </React.Fragment>
 </div>
diff --git a/web-console/src/views/load-data-view/example-picker/__snapshots__/example-picker.spec.tsx.snap b/web-console/src/views/load-data-view/example-picker/__snapshots__/example-picker.spec.tsx.snap
index 73aa5bd93ca1..3201ed22d5cf 100644
--- a/web-console/src/views/load-data-view/example-picker/__snapshots__/example-picker.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/example-picker/__snapshots__/example-picker.spec.tsx.snap
@@ -2,22 +2,22 @@
 
 exports[`ExamplePicker matches snapshot 1`] = `
 <div
-  class="bp4-form-group"
+  class="bp5-form-group"
 >
   <label
-    class="bp4-label"
+    class="bp5-label"
   >
     Select example dataset
      
     <span
-      class="bp4-text-muted"
+      class="bp5-text-muted"
     />
   </label>
   <div
-    class="bp4-form-content"
+    class="bp5-form-content"
   >
     <div
-      class="bp4-html-select bp4-fill"
+      class="bp5-html-select bp5-fill"
     >
       <select>
         <option
@@ -32,25 +32,23 @@ exports[`ExamplePicker matches snapshot 1`] = `
         </option>
       </select>
       <span
-        class="bp4-icon bp4-icon-double-caret-vertical"
-        icon="double-caret-vertical"
+        class="bp5-icon bp5-icon-double-caret-vertical"
       >
         <svg
-          aria-labelledby="iconTitle-0"
           data-icon="double-caret-vertical"
           height="16"
           role="img"
           viewBox="0 0 16 16"
           width="16"
         >
-          <title
-            id="iconTitle-0"
-          >
+          <title>
             Open dropdown
           </title>
           <path
-            d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+            d="M100 180H220C231 180 240 189 240 200C240 205.6 237.8 210.6 234.2 214.2L174.2 274.2C170.6 277.8 165.6 280 160 280S149.4 277.8 145.8 274.2L85.8 214.2C82.2 210.6 80 205.6 80 200C80 189 89 180 100 180zM220 140H100C89 140 80 131 80 120C80 114.4 82.2 109.4 85.8 105.8L145.8 45.8C149.4 42.2 154.4 40 160 40S170.6 42.2 174.2 45.8L234.2 105.8C237.8 109.4 240 114.4 240 120C240 131 231 140 220 140z"
             fill-rule="evenodd"
+            style="transform-origin: center;"
+            transform="scale(0.05, -0.05) translate(-160, -160)"
           />
         </svg>
       </span>
diff --git a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
index 054ee0b5d8c1..602ca539f8e0 100644
--- a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
@@ -8,52 +8,41 @@ exports[`FormEditor matches snapshot 1`] = `
     class="auto-form"
   >
     <div
-      class="bp4-form-group form-group-with-info"
+      class="bp5-form-group form-group-with-info"
     >
       <label
-        class="bp4-label"
+        class="bp5-label"
       >
         Input format
          
         <span
-          class="bp4-text-muted"
+          class="bp5-text-muted"
         >
           <span
-            aria-haspopup="true"
-            class="info-popover bp4-popover2-target"
+            class="bp5-popover2-target info-popover bp5-popover-target"
           >
             <span
+              aria-expanded="false"
+              aria-haspopup="menu"
               aria-hidden="true"
-              class="bp4-icon bp4-icon-info-sign"
-              icon="info-sign"
-            >
-              <svg
-                data-icon="info-sign"
-                height="14"
-                role="img"
-                viewBox="0 0 16 16"
-                width="14"
-              >
-                <path
-                  d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-info-sign"
+              data-icon="info-sign"
+            />
           </span>
         </span>
       </label>
       <div
-        class="bp4-form-content"
+        class="bp5-form-content"
       >
         <div
           class="formatted-input suggestible-input"
         >
           <div
-            class="bp4-input-group bp4-intent-primary"
+            class="bp5-input-group bp5-intent-primary"
           >
             <input
-              class="bp4-input"
+              aria-disabled="false"
+              class="bp5-input"
               placeholder=""
               type="text"
               value=""
@@ -67,46 +56,33 @@ exports[`FormEditor matches snapshot 1`] = `
     class="apply-cancel-buttons"
   >
     <button
-      class="bp4-button bp4-intent-danger delete"
+      class="bp5-button bp5-intent-danger delete"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="bp4-icon bp4-icon-trash"
-        icon="trash"
-      >
-        <svg
-          data-icon="trash"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
+        class="bp5-icon bp5-icon-standard bp5-icon-trash"
+        data-icon="trash"
+      />
     </button>
     <button
-      class="bp4-button"
+      class="bp5-button"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         Cancel
       </span>
     </button>
     <button
-      class="bp4-button bp4-disabled bp4-intent-primary"
+      class="bp5-button bp5-disabled bp5-intent-primary"
       disabled=""
       tabindex="-1"
       type="button"
     >
       <span
-        class="bp4-button-text"
+        class="bp5-button-text"
       >
         Apply
       </span>
diff --git a/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap b/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap
index 07fbc786424e..7d11b0006cdc 100755
--- a/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap
+++ b/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`LookupsView matches snapshot 1`] = `
       localStorageKey="lookups-refresh-rate"
       onRefresh={[Function]}
     />
-    <Blueprint4.Button
+    <Blueprint5.Button
       icon="plus"
       onClick={[Function]}
       text="Add lookup"
diff --git a/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap b/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
index 9c7e40197a62..595a48f743e6 100755
--- a/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
+++ b/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
@@ -12,37 +12,36 @@ exports[`SegmentsView matches snapshot 1`] = `
         localStorageKey="segments-refresh-rate"
         onRefresh={[Function]}
       />
-      <Unknown>
+      <ForwardRef>
         Group by
-      </Unknown>
-      <Blueprint4.ButtonGroup>
-        <Blueprint4.Button
+      </ForwardRef>
+      <Blueprint5.ButtonGroup>
+        <Blueprint5.Button
           active={true}
           onClick={[Function]}
         >
           None
-        </Blueprint4.Button>
-        <Blueprint4.Button
+        </Blueprint5.Button>
+        <Blueprint5.Button
           active={false}
           onClick={[Function]}
         >
           Interval
-        </Blueprint4.Button>
-      </Blueprint4.ButtonGroup>
+        </Blueprint5.Button>
+      </Blueprint5.ButtonGroup>
       <Memo(MoreButton)>
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={true}
           icon="application"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="View SQL query for table"
         />
       </Memo(MoreButton)>
-      <Blueprint4.Switch
+      <Blueprint5.Switch
         checked={false}
         disabled={false}
         label="Show segment timeline"
diff --git a/web-console/src/views/services-view/__snapshots__/services-view.spec.tsx.snap b/web-console/src/views/services-view/__snapshots__/services-view.spec.tsx.snap
index 93e47b06e277..3e4e05a451fd 100644
--- a/web-console/src/views/services-view/__snapshots__/services-view.spec.tsx.snap
+++ b/web-console/src/views/services-view/__snapshots__/services-view.spec.tsx.snap
@@ -7,42 +7,41 @@ exports[`ServicesView renders data 1`] = `
   <Memo(ViewControlBar)
     label="Services"
   >
-    <Unknown>
+    <ForwardRef>
       Group by
-    </Unknown>
-    <Blueprint4.ButtonGroup>
-      <Blueprint4.Button
+    </ForwardRef>
+    <Blueprint5.ButtonGroup>
+      <Blueprint5.Button
         active={true}
         onClick={[Function]}
       >
         None
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Type
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Tier
-      </Blueprint4.Button>
-    </Blueprint4.ButtonGroup>
+      </Blueprint5.Button>
+    </Blueprint5.ButtonGroup>
     <Memo(RefreshButton)
       localStorageKey="services-refresh-rate"
       onRefresh={[Function]}
     />
     <Memo(MoreButton)>
-      <Blueprint4.MenuItem
+      <Blueprint5.MenuItem
         active={false}
         disabled={false}
         icon="application"
         multiline={false}
         onClick={[Function]}
         popoverProps={{}}
-        selected={false}
         shouldDismissPopover={true}
         text="View SQL query for table"
       />
diff --git a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
index b20802ca4b84..872b2a1826b9 100644
--- a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
+++ b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
@@ -13,51 +13,47 @@ exports[`SupervisorsView matches snapshot 1`] = `
     />
     <React.Fragment>
       <Memo(MoreButton)>
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="application"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="View SQL query for table"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="manually-entered-data"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Submit JSON supervisor"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="play"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Resume all supervisors"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="pause"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Suspend all supervisors"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="cross"
@@ -65,7 +61,6 @@ exports[`SupervisorsView matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Terminate all supervisors"
         />
@@ -230,74 +225,55 @@ exports[`SupervisorsView matches snapshot 1`] = `
           "Header": <React.Fragment>
             Stats
             <br />
-            <Blueprint4.Popover2
-              boundary="clippingParents"
-              captureDismiss={false}
+            <Popover2
               content={
-                <Blueprint4.Menu>
-                  <Blueprint4.MenuItem
+                <Blueprint5.Menu>
+                  <Blueprint5.MenuItem
                     active={false}
                     disabled={false}
                     icon="circle"
                     multiline={false}
                     onClick={[Function]}
                     popoverProps={{}}
-                    selected={false}
                     shouldDismissPopover={true}
                     text="Rate over past 1 minute"
                   />
-                  <Blueprint4.MenuItem
+                  <Blueprint5.MenuItem
                     active={false}
                     disabled={false}
                     icon="tick-circle"
                     multiline={false}
                     onClick={[Function]}
                     popoverProps={{}}
-                    selected={false}
                     shouldDismissPopover={true}
                     text="Rate over past 5 minutes"
                   />
-                  <Blueprint4.MenuItem
+                  <Blueprint5.MenuItem
                     active={false}
                     disabled={false}
                     icon="circle"
                     multiline={false}
                     onClick={[Function]}
                     popoverProps={{}}
-                    selected={false}
                     shouldDismissPopover={true}
                     text="Rate over past 15 minutes"
                   />
-                </Blueprint4.Menu>
+                </Blueprint5.Menu>
               }
-              defaultIsOpen={false}
-              disabled={false}
-              fill={false}
-              hasBackdrop={false}
-              hoverCloseDelay={300}
-              hoverOpenDelay={150}
-              inheritDarkTheme={true}
-              interactionKind="click"
-              matchTargetWidth={false}
-              minimal={false}
-              openOnTargetFocus={true}
               position="bottom"
-              positioningStrategy="absolute"
-              shouldReturnFocusOnClose={false}
-              targetTagName="span"
-              transitionDuration={300}
-              usePortal={true}
             >
               <i
                 className="title-button"
               >
                 Rate over past 5 minutes
                  
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="caret-down"
+                  tagName="span"
                 />
               </i>
-            </Blueprint4.Popover2>
+            </Popover2>
           </React.Fragment>,
           "accessor": "stats",
           "className": "padded",
diff --git a/web-console/src/views/tasks-view/__snapshots__/tasks-view.spec.tsx.snap b/web-console/src/views/tasks-view/__snapshots__/tasks-view.spec.tsx.snap
index 178b50d9f579..b3927f64e9a0 100644
--- a/web-console/src/views/tasks-view/__snapshots__/tasks-view.spec.tsx.snap
+++ b/web-console/src/views/tasks-view/__snapshots__/tasks-view.spec.tsx.snap
@@ -7,65 +7,63 @@ exports[`TasksView matches snapshot 1`] = `
   <Memo(ViewControlBar)
     label="Tasks"
   >
-    <Unknown>
+    <ForwardRef>
       Group by
-    </Unknown>
-    <Blueprint4.ButtonGroup>
-      <Blueprint4.Button
+    </ForwardRef>
+    <Blueprint5.ButtonGroup>
+      <Blueprint5.Button
         active={true}
         onClick={[Function]}
       >
         None
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Group ID
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Type
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Datasource
-      </Blueprint4.Button>
-      <Blueprint4.Button
+      </Blueprint5.Button>
+      <Blueprint5.Button
         active={false}
         onClick={[Function]}
       >
         Status
-      </Blueprint4.Button>
-    </Blueprint4.ButtonGroup>
+      </Blueprint5.Button>
+    </Blueprint5.ButtonGroup>
     <Memo(RefreshButton)
       localStorageKey="task-refresh-rate"
       onRefresh={[Function]}
     />
     <Memo(MoreButton)>
-      <Blueprint4.MenuItem
+      <Blueprint5.MenuItem
         active={false}
         disabled={false}
         icon="application"
         multiline={false}
         onClick={[Function]}
         popoverProps={{}}
-        selected={false}
         shouldDismissPopover={true}
         text="View SQL query for table"
       />
-      <Blueprint4.MenuItem
+      <Blueprint5.MenuItem
         active={false}
         disabled={false}
         icon="manually-entered-data"
         multiline={false}
         onClick={[Function]}
         popoverProps={{}}
-        selected={false}
         shouldDismissPopover={true}
         text="Submit JSON task"
       />
diff --git a/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
index 3c5f8933c4d3..69c27731a6f2 100644
--- a/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ColumnTree matches snapshot 1`] = `
 <div
   className="column-tree"
 >
-  <HTMLSelect
+  <Blueprint5.HTMLSelect
     className="schema-selector"
     fill={true}
     large={true}
@@ -22,242 +22,155 @@ exports[`ColumnTree matches snapshot 1`] = `
     >
       sys
     </option>
-  </HTMLSelect>
-  <Blueprint4.InputGroup
+  </Blueprint5.HTMLSelect>
+  <Blueprint5.InputGroup
     className="search-box"
     onChange={[Function]}
     placeholder="Search"
     rightElement={
-      <Blueprint4.ButtonGroup
+      <Blueprint5.ButtonGroup
         minimal={true}
       >
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
+        <Popover2
           content={
-            <Blueprint4.Menu>
-              <Blueprint4.MenuDivider
+            <Blueprint5.Menu>
+              <Blueprint5.MenuDivider
                 title="Search in"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="tick"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="Tables and columns"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="Tables only"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="Columns only"
               />
-            </Blueprint4.Menu>
+            </Blueprint5.Menu>
           }
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
-          minimal={false}
-          openOnTargetFocus={true}
           position="bottom-left"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             icon="settings"
           />
-        </Blueprint4.Popover2>
-      </Blueprint4.ButtonGroup>
+        </Popover2>
+      </Blueprint5.ButtonGroup>
     }
     value=""
   />
   <div
     className="tree-container"
   >
-    <Blueprint4.Tree
+    <Blueprint5.Tree
       contents={
         [
           {
             "childNodes": [
               {
-                "icon": <Blueprint4.Icon
+                "icon": <Blueprint5.Icon
                   aria-hidden={true}
-                  className="bp4-tree-node-icon"
+                  autoLoad={true}
+                  className="bp5-tree-node-icon"
                   icon="time"
                   tabIndex={-1}
+                  tagName="span"
                   title="TIMESTAMP"
                 />,
                 "id": "__time",
-                "label": <Blueprint4.Popover2
+                "label": <Popover2
                   autoFocus={false}
-                  boundary="clippingParents"
-                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
-                  defaultIsOpen={false}
-                  disabled={false}
-                  fill={false}
-                  hasBackdrop={false}
-                  hoverCloseDelay={300}
-                  hoverOpenDelay={150}
-                  inheritDarkTheme={true}
-                  interactionKind="click"
-                  matchTargetWidth={false}
-                  minimal={false}
-                  openOnTargetFocus={true}
                   position="right"
-                  positioningStrategy="absolute"
-                  shouldReturnFocusOnClose={false}
-                  targetTagName="span"
-                  transitionDuration={300}
-                  usePortal={true}
                 >
                   __time
-                </Blueprint4.Popover2>,
+                </Popover2>,
               },
               {
-                "icon": <Blueprint4.Icon
+                "icon": <Blueprint5.Icon
                   aria-hidden={true}
-                  className="bp4-tree-node-icon"
+                  autoLoad={true}
+                  className="bp5-tree-node-icon"
                   icon="numerical"
                   tabIndex={-1}
+                  tagName="span"
                   title="BIGINT"
                 />,
                 "id": "added",
-                "label": <Blueprint4.Popover2
+                "label": <Popover2
                   autoFocus={false}
-                  boundary="clippingParents"
-                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
-                  defaultIsOpen={false}
-                  disabled={false}
-                  fill={false}
-                  hasBackdrop={false}
-                  hoverCloseDelay={300}
-                  hoverOpenDelay={150}
-                  inheritDarkTheme={true}
-                  interactionKind="click"
-                  matchTargetWidth={false}
-                  minimal={false}
-                  openOnTargetFocus={true}
                   position="right"
-                  positioningStrategy="absolute"
-                  shouldReturnFocusOnClose={false}
-                  targetTagName="span"
-                  transitionDuration={300}
-                  usePortal={true}
                 >
                   added
-                </Blueprint4.Popover2>,
+                </Popover2>,
               },
               {
-                "icon": <Blueprint4.Icon
+                "icon": <Blueprint5.Icon
                   aria-hidden={true}
-                  className="bp4-tree-node-icon"
+                  autoLoad={true}
+                  className="bp5-tree-node-icon"
                   icon="floating-point"
                   tabIndex={-1}
+                  tagName="span"
                   title="FLOAT"
                 />,
                 "id": "addedBy10",
-                "label": <Blueprint4.Popover2
+                "label": <Popover2
                   autoFocus={false}
-                  boundary="clippingParents"
-                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
-                  defaultIsOpen={false}
-                  disabled={false}
-                  fill={false}
-                  hasBackdrop={false}
-                  hoverCloseDelay={300}
-                  hoverOpenDelay={150}
-                  inheritDarkTheme={true}
-                  interactionKind="click"
-                  matchTargetWidth={false}
-                  minimal={false}
-                  openOnTargetFocus={true}
                   position="right"
-                  positioningStrategy="absolute"
-                  shouldReturnFocusOnClose={false}
-                  targetTagName="span"
-                  transitionDuration={300}
-                  usePortal={true}
                 >
                   addedBy10
-                </Blueprint4.Popover2>,
+                </Popover2>,
               },
             ],
             "className": undefined,
             "icon": "th",
             "id": "wikipedia",
             "isExpanded": true,
-            "label": <Blueprint4.Popover2
-              boundary="clippingParents"
-              captureDismiss={false}
+            "label": <Popover2
               content={
                 <Memo(Deferred)
                   content={[Function]}
                 />
               }
-              defaultIsOpen={false}
-              disabled={false}
-              fill={false}
-              hasBackdrop={false}
-              hoverCloseDelay={300}
-              hoverOpenDelay={150}
-              inheritDarkTheme={true}
-              interactionKind="click"
-              matchTargetWidth={false}
-              minimal={false}
-              openOnTargetFocus={true}
               position="right"
-              positioningStrategy="absolute"
-              shouldReturnFocusOnClose={false}
-              targetTagName="span"
-              transitionDuration={300}
-              usePortal={true}
             >
               wikipedia
-            </Blueprint4.Popover2>,
+            </Popover2>,
           },
         ]
       }
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
index 8281c3f085c4..88ea79154ead 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
@@ -3,71 +3,58 @@
 exports[`ComplexMenuItems matches snapshot when menu is opened for column not inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-function"
+            data-icon="function"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
index a69750bbceae..e0ac9961e018 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
@@ -3,139 +3,137 @@
 exports[`NumberMenuItems matches snapshot when menu is opened for column inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-filter"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="filter"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-group-objects"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="group-objects"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
@@ -143,106 +141,92 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column inside
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <span
-        class="bp4-menu-item-icon"
+        class="bp5-menu-item-icon"
       >
         <span
           aria-hidden="true"
-          class="bp4-icon bp4-icon-ungroup-objects"
-          icon="ungroup-objects"
+          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
+          data-icon="ungroup-objects"
           tabindex="-1"
-        >
-          <svg
-            data-icon="ungroup-objects"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
+        />
       </span>
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         Remove group by
       </div>
     </a>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-function"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="function"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
@@ -251,207 +235,168 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column inside
 exports[`NumberMenuItems matches snapshot when menu is opened for column not inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-filter"
+            data-icon="filter"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
+            data-icon="group-objects"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-function"
+            data-icon="function"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
index 7ac1edce8141..cead0ec0f70c 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
@@ -3,139 +3,137 @@
 exports[`StringMenuItems matches snapshot when menu is opened for column inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-filter"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="filter"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-group-objects"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="group-objects"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
@@ -143,106 +141,92 @@ exports[`StringMenuItems matches snapshot when menu is opened for column inside
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <span
-        class="bp4-menu-item-icon"
+        class="bp5-menu-item-icon"
       >
         <span
           aria-hidden="true"
-          class="bp4-icon bp4-icon-ungroup-objects"
-          icon="ungroup-objects"
+          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
+          data-icon="ungroup-objects"
           tabindex="-1"
-        >
-          <svg
-            data-icon="ungroup-objects"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
+        />
       </span>
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         Remove group by
       </div>
     </a>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-function"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="function"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
@@ -251,207 +235,168 @@ exports[`StringMenuItems matches snapshot when menu is opened for column inside
 exports[`StringMenuItems matches snapshot when menu is opened for column not inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-filter"
+            data-icon="filter"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
+            data-icon="group-objects"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-function"
+            data-icon="function"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
index 4b726452c843..23858d4718a2 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
@@ -3,139 +3,137 @@
 exports[`TimeMenuItems matches snapshot when menu is opened for column inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-filter"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="filter"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-group-objects"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="group-objects"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
@@ -143,106 +141,92 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column inside gr
     role="none"
   >
     <a
-      class="bp4-menu-item bp4-popover-dismiss"
+      class="bp5-menu-item bp5-popover-dismiss"
       role="menuitem"
       tabindex="0"
     >
       <span
-        class="bp4-menu-item-icon"
+        class="bp5-menu-item-icon"
       >
         <span
           aria-hidden="true"
-          class="bp4-icon bp4-icon-ungroup-objects"
-          icon="ungroup-objects"
+          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
+          data-icon="ungroup-objects"
           tabindex="-1"
-        >
-          <svg
-            data-icon="ungroup-objects"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
+        />
       </span>
       <div
-        class="bp4-fill bp4-text-overflow-ellipsis"
+        class="bp5-text-overflow-ellipsis bp5-fill"
       >
         Remove group by
       </div>
     </a>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-function"
+            tabindex="-1"
           >
             <svg
-              data-icon="caret-right"
+              data-icon="function"
               height="16"
               role="img"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
                 fill-rule="evenodd"
               />
             </svg>
           </span>
-        </a>
-      </span>
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
@@ -251,207 +235,168 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column inside gr
 exports[`TimeMenuItems matches snapshot when menu is opened for column not inside group by 1`] = `
 <div>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-filter"
-              icon="filter"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="filter"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Filter
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-filter"
+            data-icon="filter"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Filter
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-group-objects"
-              icon="group-objects"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="group-objects"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Group by
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
+            data-icon="group-objects"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Group by
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
   <li
-    class="bp4-submenu"
+    class="bp5-submenu"
     role="none"
   >
     <span
-      class="bp4-popover-wrapper"
+      class="bp5-popover-target"
+      role="menuitem"
+      tabindex="0"
     >
-      <span
-        aria-haspopup="true"
-        class="bp4-popover-target"
-        role="menuitem"
-        tabindex="0"
+      <a
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="bp5-menu-item"
+        role="none"
+        tabindex="-1"
       >
-        <a
-          class="bp4-menu-item"
-          role="none"
-          tabindex="-1"
+        <span
+          class="bp5-menu-item-icon"
         >
-          <span
-            class="bp4-menu-item-icon"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-function"
-              icon="function"
-              tabindex="-1"
-            >
-              <svg
-                data-icon="function"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </span>
-          <div
-            class="bp4-fill bp4-text-overflow-ellipsis"
-          >
-            Aggregate
-          </div>
           <span
             aria-hidden="true"
-            class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
-            icon="caret-right"
+            class="bp5-icon bp5-icon-standard bp5-icon-function"
+            data-icon="function"
+            tabindex="-1"
+          />
+        </span>
+        <div
+          class="bp5-text-overflow-ellipsis bp5-fill"
+        >
+          Aggregate
+        </div>
+        <span
+          class="bp5-icon bp5-icon-caret-right bp5-submenu-icon"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-right"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </a>
-      </span>
+            <title>
+              Open sub menu
+            </title>
+            <path
+              d="M220 160C220 163 218.6 165.6 216.6 167.4L216.6 167.4L136.6 237.4L136.6 237.4C134.8 239 132.6 240 130 240C124.4 240 120 235.6 120 230V90C120 84.4 124.4 80 130 80C132.6 80 134.8 81 136.6 82.6C136.6 82.6 136.6 82.6 136.6 82.6L216.6 152.6L216.6 152.6C218.6 154.4 220 157 220 160z"
+              fill-rule="evenodd"
+              style="transform-origin: center;"
+              transform="scale(0.05, -0.05) translate(-160, -160)"
+            />
+          </svg>
+        </span>
+      </a>
     </span>
   </li>
 </div>
diff --git a/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap
index 7fff3b26a3d1..8895d9819f94 100644
--- a/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExecutionErrorPane matches snapshot 1`] = `
-<Blueprint4.Callout
+<Blueprint5.Callout
   className="execution-error-pane"
   icon="error"
 >
@@ -39,5 +39,5 @@ exports[`ExecutionErrorPane matches snapshot 1`] = `
       get query detail archive
     </a>
   </div>
-</Blueprint4.Callout>
+</Blueprint5.Callout>
 `;
diff --git a/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap
index ec8542eb1eb7..1cfed409097d 100644
--- a/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ExecutionProgressBarPane matches snapshot 1`] = `
 <div
   className="execution-progress-bar-pane"
 >
-  <Unknown>
+  <ForwardRef>
     Query complete, waiting for segments to be loaded...
     <React.Fragment>
        
@@ -15,13 +15,13 @@ exports[`ExecutionProgressBarPane matches snapshot 1`] = `
         (skip waiting)
       </span>
     </React.Fragment>
-  </Unknown>
-  <Blueprint4.ProgressBar
+  </ForwardRef>
+  <Blueprint5.ProgressBar
     className="overall"
     intent="primary"
   />
-  <Unknown>
+  <ForwardRef>
     Segments loaded successfully in 0:00:05
-  </Unknown>
+  </ForwardRef>
 </div>
 `;
diff --git a/web-console/src/views/workbench-view/execution-submit-dialog/__snapshots__/execution-submit-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/execution-submit-dialog/__snapshots__/execution-submit-dialog.spec.tsx.snap
index 457deba9fd49..568654347f0f 100644
--- a/web-console/src/views/workbench-view/execution-submit-dialog/__snapshots__/execution-submit-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-submit-dialog/__snapshots__/execution-submit-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExecutionSubmitDialog matches snapshot 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   backdropProps={
     {
       "onDragLeave": [Function],
@@ -16,7 +16,7 @@ exports[`ExecutionSubmitDialog matches snapshot 1`] = `
   title="Load query detail archive"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <p>
       You can load query detail archive files from other Druid clusters to render the query detail here.
@@ -24,15 +24,15 @@ exports[`ExecutionSubmitDialog matches snapshot 1`] = `
     <p>
       To download the query detail archive for a query, click on the query in the
        
-      <Unknown>
+      <ForwardRef>
         Recent query tasks
-      </Unknown>
+      </ForwardRef>
        panel in the query view.
     </p>
-    <Blueprint4.FormGroup
+    <Blueprint5.FormGroup
       label="Select query detail archive file"
     >
-      <Blueprint4.FileInput
+      <Blueprint5.FileInput
         fill={true}
         hasSelection={false}
         inputProps={
@@ -43,22 +43,22 @@ exports[`ExecutionSubmitDialog matches snapshot 1`] = `
         onInputChange={[Function]}
         text="Choose file..."
       />
-    </Blueprint4.FormGroup>
+    </Blueprint5.FormGroup>
     <p>
       Alternatively, drag a file directly onto this dialog.
     </p>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         disabled={true}
         intent="primary"
         onClick={[Function]}
@@ -66,5 +66,5 @@ exports[`ExecutionSubmitDialog matches snapshot 1`] = `
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
index e4af6c079fc1..0de516d66dfd 100644
--- a/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
@@ -2,74 +2,47 @@
 
 exports[`AnchoredQueryTimer matches snapshot with execution 1`] = `
 <div
-  class="bp4-button-group execution-timer-panel"
+  class="bp5-button-group execution-timer-panel"
 >
   <button
-    class="bp4-button bp4-minimal timer"
+    class="bp5-button bp5-minimal timer"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-stopwatch"
-      icon="stopwatch"
-    >
-      <svg
-        data-icon="stopwatch"
-        height="16"
-        role="img"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M9 2v1.083A6.002 6.002 0 018 15 6 6 0 017 3.083V2H6a1 1 0 110-2h4a1 1 0 010 2H9zM8 5a4 4 0 104 4H8V5z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
+      class="bp5-icon bp5-icon-standard bp5-icon-stopwatch"
+      data-icon="stopwatch"
+    />
     <span
-      class="bp4-button-text"
+      class="bp5-button-text"
     >
       3.00s
     </span>
   </button>
   <button
-    class="bp4-button bp4-minimal"
+    class="bp5-button bp5-minimal"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-cross"
-      icon="cross"
-    >
-      <svg
-        data-icon="cross"
-        height="16"
-        role="img"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
+      class="bp5-icon bp5-icon-standard bp5-icon-cross"
+      data-icon="cross"
+    />
   </button>
 </div>
 `;
 
 exports[`AnchoredQueryTimer matches snapshot with startTime 1`] = `
 <div
-  class="bp4-button-group execution-timer-panel"
+  class="bp5-button-group execution-timer-panel"
 >
   <button
-    class="bp4-button bp4-minimal timer"
+    class="bp5-button bp5-minimal timer"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-stopwatch"
-      icon="stopwatch"
+      class="bp5-icon bp5-icon-stopwatch"
     >
       <svg
         data-icon="stopwatch"
@@ -85,19 +58,18 @@ exports[`AnchoredQueryTimer matches snapshot with startTime 1`] = `
       </svg>
     </span>
     <span
-      class="bp4-button-text"
+      class="bp5-button-text"
     >
       1.00s
     </span>
   </button>
   <button
-    class="bp4-button bp4-minimal"
+    class="bp5-button bp5-minimal"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="bp4-icon bp4-icon-cross"
-      icon="cross"
+      class="bp5-icon bp5-icon-cross"
     >
       <svg
         data-icon="cross"
diff --git a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index c0332ad0b015..c60b0f117531 100644
--- a/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplainDialog matches snapshot on error 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="explain-dialog"
   isOpen={true}
@@ -9,29 +9,29 @@ exports[`ExplainDialog matches snapshot on error 1`] = `
   title="Query plan"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <div>
       test error
     </div>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`ExplainDialog matches snapshot on init 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="explain-dialog"
   isOpen={true}
@@ -39,27 +39,27 @@ exports[`ExplainDialog matches snapshot on init 1`] = `
   title="Query plan"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <div />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`ExplainDialog matches snapshot on loading 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="explain-dialog"
   isOpen={true}
@@ -67,27 +67,27 @@ exports[`ExplainDialog matches snapshot on loading 1`] = `
   title="Query plan"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <Memo(Loader) />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="explain-dialog"
   isOpen={true}
@@ -95,23 +95,23 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
   title="Query plan"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
-    <Blueprint4.Tabs
+    <Blueprint5.Tabs
       animate={true}
       fill={false}
       large={false}
       renderActiveTabPanelOnly={true}
       vertical={true}
     >
-      <Blueprint4.Tab
+      <Blueprint5.Tab
         disabled={false}
         id={0}
         panel={
           <div
             className="query-explanation"
           >
-            <Blueprint4.FormGroup
+            <Blueprint5.FormGroup
               className="query-group"
             >
               <ReactAce
@@ -180,17 +180,17 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
                 width="100%"
                 wrapEnabled={false}
               />
-            </Blueprint4.FormGroup>
-            <Blueprint4.FormGroup
+            </Blueprint5.FormGroup>
+            <Blueprint5.FormGroup
               className="signature-group"
               label="Signature"
             >
-              <Blueprint4.InputGroup
+              <Blueprint5.InputGroup
                 defaultValue="channel::STRING"
                 readOnly={true}
               />
-            </Blueprint4.FormGroup>
-            <Blueprint4.Button
+            </Blueprint5.FormGroup>
+            <Blueprint5.Button
               className="open-query"
               intent="primary"
               minimal={true}
@@ -202,14 +202,14 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
         }
         title="Query 1"
       />
-      <Blueprint4.Tab
+      <Blueprint5.Tab
         disabled={false}
         id={1}
         panel={
           <div
             className="query-explanation"
           >
-            <Blueprint4.FormGroup
+            <Blueprint5.FormGroup
               className="query-group"
             >
               <ReactAce
@@ -283,17 +283,17 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
                 width="100%"
                 wrapEnabled={false}
               />
-            </Blueprint4.FormGroup>
-            <Blueprint4.FormGroup
+            </Blueprint5.FormGroup>
+            <Blueprint5.FormGroup
               className="signature-group"
               label="Signature"
             >
-              <Blueprint4.InputGroup
+              <Blueprint5.InputGroup
                 defaultValue="channel::STRING"
                 readOnly={true}
               />
-            </Blueprint4.FormGroup>
-            <Blueprint4.Button
+            </Blueprint5.FormGroup>
+            <Blueprint5.Button
               className="open-query"
               intent="primary"
               minimal={true}
@@ -305,26 +305,26 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
         }
         title="Query 2"
       />
-      <Expander />
-    </Blueprint4.Tabs>
+      <TabsExpander />
+    </Blueprint5.Tabs>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
 
 exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="explain-dialog"
   isOpen={true}
@@ -332,12 +332,12 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
   title="Query plan"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <div
       className="query-explanation"
     >
-      <Blueprint4.FormGroup
+      <Blueprint5.FormGroup
         className="query-group"
       >
         <ReactAce
@@ -469,17 +469,17 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
           width="100%"
           wrapEnabled={false}
         />
-      </Blueprint4.FormGroup>
-      <Blueprint4.FormGroup
+      </Blueprint5.FormGroup>
+      <Blueprint5.FormGroup
         className="signature-group"
         label="Signature"
       >
-        <Blueprint4.InputGroup
+        <Blueprint5.InputGroup
           defaultValue="d0::STRING, a0::LONG"
           readOnly={true}
         />
-      </Blueprint4.FormGroup>
-      <Blueprint4.Button
+      </Blueprint5.FormGroup>
+      <Blueprint5.Button
         className="open-query"
         intent="primary"
         minimal={true}
@@ -490,16 +490,16 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
     </div>
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;
diff --git a/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
index 7d0c2c79a757..68b87d9f490d 100644
--- a/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
@@ -2,27 +2,24 @@
 
 exports[`MaxTasksButton matches snapshot 1`] = `
 <React.Fragment>
-  <Blueprint4.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
+  <Popover2
     className="max-tasks-button"
     content={
-      <Blueprint4.Menu>
-        <Blueprint4.MenuDivider
+      <Blueprint5.Menu>
+        <Blueprint5.MenuDivider
           title="Maximum number of tasks to launch"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="tick"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="6 (full cluster capacity)"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="blank"
@@ -30,11 +27,10 @@ exports[`MaxTasksButton matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="2"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="blank"
@@ -42,11 +38,10 @@ exports[`MaxTasksButton matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="3"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="blank"
@@ -54,11 +49,10 @@ exports[`MaxTasksButton matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="4"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="blank"
@@ -66,41 +60,37 @@ exports[`MaxTasksButton matches snapshot 1`] = `
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="5"
         />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="blank"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Custom"
         />
-        <Blueprint4.MenuDivider />
-        <Blueprint4.MenuItem
+        <Blueprint5.MenuDivider />
+        <Blueprint5.MenuItem
           active={false}
           disabled={false}
           icon="flow-branch"
           label="max"
           multiline={false}
           popoverProps={{}}
-          selected={false}
           shouldDismissPopover={true}
           text="Task assignment"
         >
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="tick"
             multiline={true}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={false}
             text={
               <React.Fragment>
@@ -112,14 +102,13 @@ exports[`MaxTasksButton matches snapshot 1`] = `
               </React.Fragment>
             }
           />
-          <Blueprint4.MenuItem
+          <Blueprint5.MenuItem
             active={false}
             disabled={false}
             icon="blank"
             multiline={true}
             onClick={[Function]}
             popoverProps={{}}
-            selected={false}
             shouldDismissPopover={false}
             text={
               <React.Fragment>
@@ -131,31 +120,15 @@ exports[`MaxTasksButton matches snapshot 1`] = `
               </React.Fragment>
             }
           />
-        </Blueprint4.MenuItem>
-      </Blueprint4.Menu>
+        </Blueprint5.MenuItem>
+      </Blueprint5.Menu>
     }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={false}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    matchTargetWidth={false}
-    minimal={false}
-    openOnTargetFocus={true}
     position="bottom-left"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
   >
-    <Blueprint4.Button
+    <Blueprint5.Button
       rightIcon="caret-down"
       text="Max tasks: 6 (full cluster capacity)"
     />
-  </Blueprint4.Popover2>
+  </Popover2>
 </React.Fragment>
 `;
diff --git a/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
index e392bcf49caf..c0050b849e57 100644
--- a/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`QueryParametersDialog matches snapshot 1`] = `
-<Blueprint4.Dialog
+<Blueprint5.Dialog
   canOutsideClickClose={true}
   className="query-parameters-dialog"
   isOpen={true}
@@ -9,449 +9,361 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
   title="Dynamic query parameters"
 >
   <div
-    className="bp4-dialog-body"
+    className="bp5-dialog-body"
   >
     <p>
       Druid SQL supports dynamic parameters using question mark 
-      <Unknown>
+      <ForwardRef>
         ?
-      </Unknown>
+      </ForwardRef>
        syntax, where parameters are bound positionally to ? placeholders at execution time.
     </p>
-    <Blueprint4.FormGroup
+    <Blueprint5.FormGroup
       label="Parameter in position 1"
     >
-      <Blueprint4.ControlGroup
+      <Blueprint5.ControlGroup
         fill={true}
       >
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
+        <Popover2
           content={
-            <Blueprint4.Menu>
-              <Blueprint4.MenuItem
+            <Blueprint5.Menu>
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="tick"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="VARCHAR"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="TIMESTAMP"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="BIGINT"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="DOUBLE"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="FLOAT"
               />
-            </Blueprint4.Menu>
+            </Blueprint5.Menu>
           }
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
           minimal={true}
-          openOnTargetFocus={true}
           position="bottom-left"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             rightIcon="caret-down"
             text="VARCHAR"
           />
-        </Blueprint4.Popover2>
-        <Blueprint4.InputGroup
+        </Popover2>
+        <Blueprint5.InputGroup
           fill={true}
           onChange={[Function]}
           placeholder="Parameter value"
           value="Hello world"
         />
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="trash"
           onClick={[Function]}
         />
-      </Blueprint4.ControlGroup>
-    </Blueprint4.FormGroup>
-    <Blueprint4.FormGroup
+      </Blueprint5.ControlGroup>
+    </Blueprint5.FormGroup>
+    <Blueprint5.FormGroup
       label="Parameter in position 2"
     >
-      <Blueprint4.ControlGroup
+      <Blueprint5.ControlGroup
         fill={true}
       >
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
+        <Popover2
           content={
-            <Blueprint4.Menu>
-              <Blueprint4.MenuItem
+            <Blueprint5.Menu>
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="VARCHAR"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="tick"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="TIMESTAMP"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="BIGINT"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="DOUBLE"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="FLOAT"
               />
-            </Blueprint4.Menu>
+            </Blueprint5.Menu>
           }
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
           minimal={true}
-          openOnTargetFocus={true}
           position="bottom-left"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             rightIcon="caret-down"
             text="TIMESTAMP"
           />
-        </Blueprint4.Popover2>
-        <Blueprint4.InputGroup
+        </Popover2>
+        <Blueprint5.InputGroup
           fill={true}
           onChange={[Function]}
           placeholder="2022-01-01 00:00:00"
           value="2022-02-02 01:02:03"
         />
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="trash"
           onClick={[Function]}
         />
-      </Blueprint4.ControlGroup>
-    </Blueprint4.FormGroup>
-    <Blueprint4.FormGroup
+      </Blueprint5.ControlGroup>
+    </Blueprint5.FormGroup>
+    <Blueprint5.FormGroup
       label="Parameter in position 3"
     >
-      <Blueprint4.ControlGroup
+      <Blueprint5.ControlGroup
         fill={true}
       >
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
+        <Popover2
           content={
-            <Blueprint4.Menu>
-              <Blueprint4.MenuItem
+            <Blueprint5.Menu>
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="VARCHAR"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="TIMESTAMP"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="tick"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="BIGINT"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="DOUBLE"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="FLOAT"
               />
-            </Blueprint4.Menu>
+            </Blueprint5.Menu>
           }
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
           minimal={true}
-          openOnTargetFocus={true}
           position="bottom-left"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             rightIcon="caret-down"
             text="BIGINT"
           />
-        </Blueprint4.Popover2>
+        </Popover2>
         <Memo(FancyNumericInput)
           arbitraryPrecision={false}
           fill={true}
           onValueChange={[Function]}
           value={42}
         />
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="trash"
           onClick={[Function]}
         />
-      </Blueprint4.ControlGroup>
-    </Blueprint4.FormGroup>
-    <Blueprint4.FormGroup
+      </Blueprint5.ControlGroup>
+    </Blueprint5.FormGroup>
+    <Blueprint5.FormGroup
       label="Parameter in position 4"
     >
-      <Blueprint4.ControlGroup
+      <Blueprint5.ControlGroup
         fill={true}
       >
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
+        <Popover2
           content={
-            <Blueprint4.Menu>
-              <Blueprint4.MenuItem
+            <Blueprint5.Menu>
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="VARCHAR"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="TIMESTAMP"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="BIGINT"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="tick"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="DOUBLE"
               />
-              <Blueprint4.MenuItem
+              <Blueprint5.MenuItem
                 active={false}
                 disabled={false}
                 icon="blank"
                 multiline={false}
                 onClick={[Function]}
                 popoverProps={{}}
-                selected={false}
                 shouldDismissPopover={true}
                 text="FLOAT"
               />
-            </Blueprint4.Menu>
+            </Blueprint5.Menu>
           }
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
           minimal={true}
-          openOnTargetFocus={true}
           position="bottom-left"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             rightIcon="caret-down"
             text="DOUBLE"
           />
-        </Blueprint4.Popover2>
+        </Popover2>
         <Memo(FancyNumericInput)
           arbitraryPrecision={true}
           fill={true}
           onValueChange={[Function]}
           value={1.618}
         />
-        <Blueprint4.Button
+        <Blueprint5.Button
           icon="trash"
           onClick={[Function]}
         />
-      </Blueprint4.ControlGroup>
-    </Blueprint4.FormGroup>
-    <Blueprint4.Button
+      </Blueprint5.ControlGroup>
+    </Blueprint5.FormGroup>
+    <Blueprint5.Button
       icon="plus"
       onClick={[Function]}
       text="Add parameter"
     />
   </div>
   <div
-    className="bp4-dialog-footer"
+    className="bp5-dialog-footer"
   >
     <div
-      className="bp4-dialog-footer-actions"
+      className="bp5-dialog-footer-actions"
     >
-      <Blueprint4.Button
+      <Blueprint5.Button
         onClick={[Function]}
         text="Close"
       />
-      <Blueprint4.Button
+      <Blueprint5.Button
         intent="primary"
         onClick={[Function]}
         text="Save"
       />
     </div>
   </div>
-</Blueprint4.Dialog>
+</Blueprint5.Dialog>
 `;

From ce73fefe360974d9d522d762a7a47c1076ab113b Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 17 Jul 2024 16:55:20 -0700
Subject: [PATCH 04/15] fix BP5 issues

---
 web-console/package-lock.json                 |  32 ---
 web-console/package.json                      |   2 -
 .../components/action-cell/action-cell.tsx    |   7 +-
 .../__snapshots__/array-input.spec.tsx.snap   |   2 +-
 .../components/array-input/array-input.tsx    |   7 +-
 .../array-mode-swtich.spec.tsx.snap           |   2 +-
 .../center-message.spec.tsx.snap              |   2 +-
 .../center-message/center-message.tsx         |   4 +-
 .../date-range-selector.scss                  |  29 ---
 .../date-range-selector.tsx                   |  74 -------
 .../form-group-with-info.spec.tsx.snap        |   2 +-
 .../form-group-with-info.tsx                  |   7 +-
 .../formatted-input/formatted-input.tsx       |   7 +-
 .../__snapshots__/header-bar.spec.tsx.snap    |  87 +++++++-
 .../src/components/header-bar/header-bar.tsx  |  22 +-
 .../restricted-mode.spec.tsx.snap             |  44 +++-
 .../restricted-mode/restricted-mode.tsx       |   7 +-
 .../interval-input.spec.tsx.snap              |   2 +-
 .../interval-input/interval-input.tsx         |  24 +--
 .../__snapshots__/more-button.spec.tsx.snap   |   4 +-
 .../components/more-button/more-button.tsx    |   7 +-
 .../record-table-pane/record-table-pane.tsx   |   7 +-
 .../segment-timeline.spec.tsx.snap            |  45 ++--
 .../segment-timeline.spec.tsx                 |   4 +-
 .../segment-timeline/segment-timeline.tsx     | 197 +++++++++---------
 .../segment-timeline/stacked-bar-chart.tsx    |   7 +-
 .../suggestible-input.spec.tsx.snap           |   4 +-
 .../suggestible-input/suggestible-input.tsx   |   7 +-
 .../table-column-selector.spec.tsx.snap       |   2 +-
 .../table-column-selector.tsx                 |   7 +-
 .../table-filterable-cell.tsx                 |   7 +-
 .../__snapshots__/timed-button.spec.tsx.snap  |  22 +-
 .../components/timed-button/timed-button.tsx  |   7 +-
 .../compaction-config-dialog.tsx              |   7 +-
 ...tasource-table-action-dialog.spec.tsx.snap |   2 +-
 .../lookup-table-action-dialog.spec.tsx.snap  |   2 +-
 .../retention-dialog.spec.tsx.snap            |   2 +-
 .../segment-table-action-dialog.spec.tsx.snap |   2 +-
 ...pervisor-table-action-dialog.spec.tsx.snap |   2 +-
 .../table-action-dialog.tsx                   |   7 +-
 .../task-table-action-dialog.spec.tsx.snap    |   2 +-
 web-console/src/entry.scss                    |   3 +-
 web-console/src/{entry.ts => entry.tsx}       |  15 +-
 .../src/react-table/react-table-inputs.tsx    |   7 +-
 .../react-table-pagination.tsx                |   7 +-
 .../control-pane/aggregates-input.tsx         |   7 +-
 .../control-pane/columns-input.tsx            |   7 +-
 .../control-pane/control-pane.tsx             |  14 +-
 .../control-pane/options-input.tsx            |   7 +-
 .../explore-view/filter-pane/filter-pane.tsx  |  11 +-
 .../generic-output-table.tsx                  |  13 +-
 .../resource-pane/resource-pane.tsx           |   7 +-
 .../explore-view/source-pane/source-pane.tsx  |   7 +-
 .../explore-view/tile-picker/tile-picker.tsx  |  11 +-
 .../home-view/status-card/status-card.tsx     |   6 +-
 .../__snapshots__/form-editor.spec.tsx.snap   |   2 +-
 .../views/load-data-view/load-data-view.tsx   |  18 +-
 .../column-actions/column-actions.tsx         |  11 +-
 .../column-editor/column-editor.tsx           |   6 +-
 .../destination-form/destination-form.tsx     |   6 +-
 .../schema-step/column-list/column-list.tsx   |  11 +-
 .../preview-table/preview-table.tsx           |   7 +-
 .../schema-step/schema-step.tsx               |  18 +-
 .../supervisors-view.spec.tsx.snap            |  22 +-
 .../supervisors-view/supervisors-view.tsx     |   7 +-
 .../__snapshots__/column-tree.spec.tsx.snap   | 110 +++++++++-
 .../column-tree/column-tree.tsx               |  46 ++--
 .../destination-pages-pane.tsx                |   7 +-
 .../execution-stages-pane.tsx                 |  11 +-
 .../execution-summary-panel.tsx               |   7 +-
 .../flexible-query-input.tsx                  |   7 +-
 .../max-tasks-button.spec.tsx.snap            |  22 +-
 .../max-tasks-button/max-tasks-button.tsx     |   7 +-
 .../query-parameters-dialog.spec.tsx.snap     |  84 +++++++-
 .../query-parameters-dialog.tsx               |   6 +-
 .../recent-query-task-panel.tsx               |   7 +-
 .../result-table-pane/result-table-pane.tsx   |  11 +-
 .../workbench-view/run-panel/run-panel.tsx    |  14 +-
 .../workbench-history-dialog.tsx              |   7 +-
 .../views/workbench-view/workbench-view.tsx   |  15 +-
 web-console/webpack.config.js                 |   2 +-
 81 files changed, 735 insertions(+), 574 deletions(-)
 delete mode 100644 web-console/src/components/date-range-selector/date-range-selector.scss
 delete mode 100644 web-console/src/components/date-range-selector/date-range-selector.tsx
 rename web-console/src/{entry.ts => entry.tsx} (93%)

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index af38ac1a0a1b..459d8385c366 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -10,10 +10,8 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@blueprintjs/core": "^5.10.5",
-        "@blueprintjs/datetime": "^5.3.7",
         "@blueprintjs/datetime2": "^2.3.7",
         "@blueprintjs/icons": "^5.10.0",
-        "@blueprintjs/popover2": "^2.1.7",
         "@blueprintjs/select": "^5.2.1",
         "@druid-toolkit/query": "^0.22.20",
         "@druid-toolkit/visuals-core": "^0.3.3",
@@ -937,26 +935,6 @@
         }
       }
     },
-    "node_modules/@blueprintjs/popover2": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-2.1.7.tgz",
-      "integrity": "sha512-ekulhvHgIwgK709HI7qGzGu3nnye1jg2iNulmIyf85YkEPThZ2KnCdM0qr2BhAlB0ZwmemXnOXCj2RBMX37E0A==",
-      "dependencies": {
-        "@blueprintjs/core": "^5.10.5",
-        "classnames": "^2.3.1",
-        "tslib": "~2.6.2"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.14.41 || 17 || 18",
-        "react": "^16.8 || 17 || 18",
-        "react-dom": "^16.8 || 17 || 18"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@blueprintjs/select": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.1.tgz",
@@ -19081,16 +19059,6 @@
         "tslib": "~2.6.2"
       }
     },
-    "@blueprintjs/popover2": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-2.1.7.tgz",
-      "integrity": "sha512-ekulhvHgIwgK709HI7qGzGu3nnye1jg2iNulmIyf85YkEPThZ2KnCdM0qr2BhAlB0ZwmemXnOXCj2RBMX37E0A==",
-      "requires": {
-        "@blueprintjs/core": "^5.10.5",
-        "classnames": "^2.3.1",
-        "tslib": "~2.6.2"
-      }
-    },
     "@blueprintjs/select": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.1.tgz",
diff --git a/web-console/package.json b/web-console/package.json
index e5af117ccfc6..cccb5d775286 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -64,10 +64,8 @@
   ],
   "dependencies": {
     "@blueprintjs/core": "^5.10.5",
-    "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
     "@blueprintjs/icons": "^5.10.0",
-    "@blueprintjs/popover2": "^2.1.7",
     "@blueprintjs/select": "^5.2.1",
     "@druid-toolkit/query": "^0.22.20",
     "@druid-toolkit/visuals-core": "^0.3.3",
diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
index 4a20e429977e..9e9a7a3248bb 100644
--- a/web-console/src/components/action-cell/action-cell.tsx
+++ b/web-console/src/components/action-cell/action-cell.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Position } from '@blueprintjs/core';
+import { Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import type { BasicAction } from '../../utils/basic-action';
@@ -48,9 +47,9 @@ export const ActionCell = React.memo(function ActionCell(props: ActionCellProps)
         <ActionIcon icon={IconNames.SEARCH_TEMPLATE} onClick={onDetail} disabled={disableDetail} />
       )}
       {actionsMenu && (
-        <Popover2 content={actionsMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover content={actionsMenu} position={Position.BOTTOM_RIGHT}>
           <ActionIcon icon={IconNames.MORE} />
-        </Popover2>
+        </Popover>
       )}
     </div>
   );
diff --git a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
index 8ff7c133a262..ed2f8268dcf1 100644
--- a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
+++ b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`ArrayInput matches snapshot 1`] = `
     apple, banana, pear
   </textarea>
   <span
-    class="bp5-popover2-target suggestion-button bp5-popover-target"
+    class="suggestion-button bp5-popover-target"
   >
     <button
       aria-expanded="false"
diff --git a/web-console/src/components/array-input/array-input.tsx b/web-console/src/components/array-input/array-input.tsx
index c5a0ee1245dd..b2defda6a8a5 100644
--- a/web-console/src/components/array-input/array-input.tsx
+++ b/web-console/src/components/array-input/array-input.tsx
@@ -17,9 +17,8 @@
  */
 
 import type { Intent } from '@blueprintjs/core';
-import { Button, Position, TextArea } from '@blueprintjs/core';
+import { Button, Popover, Position, TextArea } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
@@ -76,14 +75,14 @@ export const ArrayInput = React.memo(function ArrayInput(props: ArrayInputProps)
         fill
       />
       {suggestions && (
-        <Popover2
+        <Popover
           className="suggestion-button"
           content={<SuggestionMenu suggestions={suggestions} onSuggest={handleSuggestionSelect} />}
           position={Position.BOTTOM_RIGHT}
           autoFocus={false}
         >
           <Button icon={IconNames.PLUS} minimal />
-        </Popover2>
+        </Popover>
       )}
     </div>
   );
diff --git a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
index 6c49cca906e5..e2d1457ccbc2 100644
--- a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
+++ b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
@@ -20,7 +20,7 @@ exports[`ArrayModeSwitch matches snapshot 1`] = `
       Store ARRAYs as MVDs
     </label>
     <span
-      class="bp5-popover2-target info-popover bp5-popover-target"
+      class="info-popover bp5-popover-target"
     >
       <span
         aria-expanded="false"
diff --git a/web-console/src/components/center-message/__snapshots__/center-message.spec.tsx.snap b/web-console/src/components/center-message/__snapshots__/center-message.spec.tsx.snap
index d35cc1f7e158..f5441ea2cf53 100644
--- a/web-console/src/components/center-message/__snapshots__/center-message.spec.tsx.snap
+++ b/web-console/src/components/center-message/__snapshots__/center-message.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CenterMessage matches snapshot 1`] = `
 <div
-  class="center-message bp4-input"
+  class="center-message bp5-input"
 >
   <div
     class="center-message-inner"
diff --git a/web-console/src/components/center-message/center-message.tsx b/web-console/src/components/center-message/center-message.tsx
index eeee622b31bc..8fe0ea8a8c71 100644
--- a/web-console/src/components/center-message/center-message.tsx
+++ b/web-console/src/components/center-message/center-message.tsx
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React from 'react';
 
@@ -29,7 +31,7 @@ export const CenterMessage = React.memo(function CenterMessage(props: CenterMess
   const { children } = props;
 
   return (
-    <div className="center-message bp4-input">
+    <div className={classNames('center-message', Classes.INPUT)}>
       <div className="center-message-inner">{children}</div>
     </div>
   );
diff --git a/web-console/src/components/date-range-selector/date-range-selector.scss b/web-console/src/components/date-range-selector/date-range-selector.scss
deleted file mode 100644
index 39df4d75f2ab..000000000000
--- a/web-console/src/components/date-range-selector/date-range-selector.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import '../../variables';
-
-.date-range-selector {
-  .#{$bp-ns}-popover-target {
-    display: block;
-  }
-
-  * {
-    cursor: pointer;
-  }
-}
diff --git a/web-console/src/components/date-range-selector/date-range-selector.tsx b/web-console/src/components/date-range-selector/date-range-selector.tsx
deleted file mode 100644
index 08ea9fcdca3d..000000000000
--- a/web-console/src/components/date-range-selector/date-range-selector.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Button, InputGroup, Position } from '@blueprintjs/core';
-import type { DateRange } from '@blueprintjs/datetime2';
-import { DateRangeInput2 } from '@blueprintjs/datetime2';
-import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
-import React, { useState } from 'react';
-
-import { dateToIsoDateString, localToUtcDate, utcToLocalDate } from '../../utils';
-
-import './date-range-selector.scss';
-
-const BASIC_DATE_PARSER = (str: string) => new Date(str);
-
-interface DateRangeSelectorProps {
-  startDate: Date;
-  endDate: Date;
-  onChange: (startDate: Date, endDate: Date) => void;
-}
-
-export const DateRangeSelector = React.memo(function DateRangeSelector(
-  props: DateRangeSelectorProps,
-) {
-  const { startDate, endDate, onChange } = props;
-  const [intermediateDateRange, setIntermediateDateRange] = useState<DateRange | undefined>();
-
-  return (
-    <Popover2
-      className="date-range-selector"
-      content={
-        <DateRangeInput2
-          formatDate={dateToIsoDateString}
-          parseDate={BASIC_DATE_PARSER}
-          value={intermediateDateRange || [utcToLocalDate(startDate), utcToLocalDate(endDate)]}
-          contiguousCalendarMonths={false}
-          reverseMonthAndYearMenus
-          onChange={(selectedRange: DateRange) => {
-            const [startDate, endDate] = selectedRange;
-            if (!startDate || !endDate) {
-              setIntermediateDateRange(selectedRange);
-            } else {
-              setIntermediateDateRange(undefined);
-              onChange(localToUtcDate(startDate), localToUtcDate(endDate));
-            }
-          }}
-        />
-      }
-      position={Position.BOTTOM_RIGHT}
-    >
-      <InputGroup
-        value={`${dateToIsoDateString(startDate)} ➔ ${dateToIsoDateString(endDate)}`}
-        readOnly
-        rightElement={<Button rightIcon={IconNames.CALENDAR} minimal />}
-      />
-    </Popover2>
-  );
-});
diff --git a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
index 30431b55af4d..064c72482677 100644
--- a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
+++ b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`FormGroupWithInfo matches snapshot 1`] = `
       class="bp5-text-muted"
     >
       <span
-        class="bp5-popover2-target info-popover bp5-popover-target"
+        class="info-popover bp5-popover-target"
       >
         <span
           aria-expanded="false"
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
index b3fa0deebc19..af7cf3b0320b 100644
--- a/web-console/src/components/form-group-with-info/form-group-with-info.tsx
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { FormGroup, Icon } from '@blueprintjs/core';
+import { FormGroup, Icon, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { JSX } from 'react';
 import React from 'react';
 
@@ -37,9 +36,9 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
   const { label, info, inlineInfo, children } = props;
 
   const popover = (
-    <Popover2 className="info-popover" content={info} position="left-bottom">
+    <Popover className="info-popover" content={info} position="left-bottom">
       <Icon icon={IconNames.INFO_SIGN} size={14} />
-    </Popover2>
+    </Popover>
   );
 
   return (
diff --git a/web-console/src/components/formatted-input/formatted-input.tsx b/web-console/src/components/formatted-input/formatted-input.tsx
index c93f3f20a022..170799a8849a 100644
--- a/web-console/src/components/formatted-input/formatted-input.tsx
+++ b/web-console/src/components/formatted-input/formatted-input.tsx
@@ -17,8 +17,7 @@
  */
 
 import type { InputGroupProps2 } from '@blueprintjs/core';
-import { InputGroup, Intent, TextArea } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { InputGroup, Intent, TextArea, Tooltip } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
@@ -121,7 +120,7 @@ export const FormattedInput = React.memo(function FormattedInput(props: Formatte
         />
       )}
       {showIssue && (
-        <Tooltip2
+        <Tooltip
           isOpen
           content={showIssue ? issue : undefined}
           position="right"
@@ -129,7 +128,7 @@ export const FormattedInput = React.memo(function FormattedInput(props: Formatte
           targetTagName="div"
         >
           <div className="target-dummy" />
-        </Tooltip2>
+        </Tooltip>
       )}
     </div>
   );
diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index f596f646b921..3a31114d3ad8 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -22,7 +22,9 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Query"
     />
-    <Popover2
+    <Blueprint5.Popover
+      boundary="clippingParents"
+      captureDismiss={false}
       content={
         <Blueprint5.Menu>
           <Blueprint5.MenuItem
@@ -72,8 +74,23 @@ exports[`HeaderBar matches snapshot 1`] = `
           />
         </Blueprint5.Menu>
       }
+      defaultIsOpen={false}
       disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      matchTargetWidth={false}
+      minimal={false}
+      openOnTargetFocus={true}
       position="bottom-left"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
     >
       <Blueprint5.Button
         active={false}
@@ -83,7 +100,7 @@ exports[`HeaderBar matches snapshot 1`] = `
         minimal={true}
         text="Load data"
       />
-    </Popover2>
+    </Blueprint5.Popover>
     <Blueprint5.NavbarDivider />
     <Blueprint5.AnchorButton
       active={false}
@@ -130,7 +147,9 @@ exports[`HeaderBar matches snapshot 1`] = `
       minimal={true}
       text="Services"
     />
-    <Popover2
+    <Blueprint5.Popover
+      boundary="clippingParents"
+      captureDismiss={false}
       content={
         <Blueprint5.Menu>
           <Blueprint5.MenuItem
@@ -159,7 +178,23 @@ exports[`HeaderBar matches snapshot 1`] = `
           />
         </Blueprint5.Menu>
       }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      matchTargetWidth={false}
+      minimal={false}
+      openOnTargetFocus={true}
       position="bottom-left"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
     >
       <Blueprint5.Button
         active={false}
@@ -167,7 +202,7 @@ exports[`HeaderBar matches snapshot 1`] = `
         icon="more"
         minimal={true}
       />
-    </Popover2>
+    </Blueprint5.Popover>
   </Blueprint5.NavbarGroup>
   <Blueprint5.NavbarGroup
     align="right"
@@ -184,7 +219,9 @@ exports[`HeaderBar matches snapshot 1`] = `
       }
       onUnrestrict={[Function]}
     />
-    <Popover2
+    <Blueprint5.Popover
+      boundary="clippingParents"
+      captureDismiss={false}
       content={
         <Blueprint5.Menu>
           <Blueprint5.MenuItem
@@ -276,15 +313,33 @@ exports[`HeaderBar matches snapshot 1`] = `
           </Blueprint5.MenuItem>
         </Blueprint5.Menu>
       }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      matchTargetWidth={false}
+      minimal={false}
+      openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
     >
       <Blueprint5.Button
         className="header-entry"
         icon="cog"
         minimal={true}
       />
-    </Popover2>
-    <Popover2
+    </Blueprint5.Popover>
+    <Blueprint5.Popover
+      boundary="clippingParents"
+      captureDismiss={false}
       content={
         <Blueprint5.Menu>
           <Blueprint5.MenuItem
@@ -343,14 +398,30 @@ exports[`HeaderBar matches snapshot 1`] = `
           />
         </Blueprint5.Menu>
       }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      matchTargetWidth={false}
+      minimal={false}
+      openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
     >
       <Blueprint5.Button
         className="header-entry"
         icon="help"
         minimal={true}
       />
-    </Popover2>
+    </Blueprint5.Popover>
   </Blueprint5.NavbarGroup>
 </Blueprint5.Navbar>
 `;
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 9a66dbaeace3..e1b97cf4e131 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -27,11 +27,11 @@ import {
   Navbar,
   NavbarDivider,
   NavbarGroup,
+  Popover,
   Position,
   Tag,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import {
@@ -284,7 +284,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           disabled={!capabilities.hasQuerying()}
         />
         {showSplitDataLoaderMenu ? (
-          <Popover2
+          <Popover
             content={loadDataViewsMenu}
             disabled={!capabilities.hasEverything()}
             position={Position.BOTTOM_LEFT}
@@ -297,7 +297,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
               active={loadDataViewsMenuActive}
               disabled={!capabilities.hasEverything()}
             />
-          </Popover2>
+          </Popover>
         ) : (
           <AnchorButton
             className="header-entry"
@@ -355,14 +355,14 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           href="#services"
           disabled={!capabilities.hasSqlOrCoordinatorAccess()}
         />
-        <Popover2 content={moreViewsMenu} position={Position.BOTTOM_LEFT}>
+        <Popover content={moreViewsMenu} position={Position.BOTTOM_LEFT}>
           <Button
             className="header-entry"
             minimal
             icon={IconNames.MORE}
             active={moreViewsMenuActive}
           />
-        </Popover2>
+        </Popover>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <RestrictedMode
@@ -373,7 +373,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           }
         />
         {capabilitiesOverride && (
-          <Popover2
+          <Popover
             content={
               <PopoverText>
                 <p>
@@ -405,14 +405,14 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
               intent={Intent.DANGER}
               minimal
             />
-          </Popover2>
+          </Popover>
         )}
-        <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover content={configMenu} position={Position.BOTTOM_RIGHT}>
           <Button className="header-entry" minimal icon={IconNames.COG} />
-        </Popover2>
-        <Popover2 content={helpMenu} position={Position.BOTTOM_RIGHT}>
+        </Popover>
+        <Popover content={helpMenu} position={Position.BOTTOM_RIGHT}>
           <Button className="header-entry" minimal icon={IconNames.HELP} />
-        </Popover2>
+        </Popover>
       </NavbarGroup>
       {aboutDialogOpen && <AboutDialog onClose={() => setAboutDialogOpen(false)} />}
       {doctorDialogOpen && <DoctorDialog onClose={() => setDoctorDialogOpen(false)} />}
diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index e2e38497e50d..00521ae8d6e3 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RestrictedMode matches snapshot when in auto capability detection mode 1`] = `
-<Popover2
+<Blueprint5.Popover
+  boundary="clippingParents"
+  captureDismiss={false}
   className="restricted-mode"
   content={
     <Memo(PopoverText)>
@@ -42,7 +44,23 @@ exports[`RestrictedMode matches snapshot when in auto capability detection mode
       </p>
     </Memo(PopoverText)>
   }
+  defaultIsOpen={false}
+  disabled={false}
+  fill={false}
+  hasBackdrop={false}
+  hoverCloseDelay={300}
+  hoverOpenDelay={150}
+  inheritDarkTheme={true}
+  interactionKind="click"
+  matchTargetWidth={false}
+  minimal={false}
+  openOnTargetFocus={true}
   position="bottom-right"
+  positioningStrategy="absolute"
+  shouldReturnFocusOnClose={false}
+  targetTagName="span"
+  transitionDuration={300}
+  usePortal={true}
 >
   <Blueprint5.Button
     icon="warning-sign"
@@ -50,11 +68,13 @@ exports[`RestrictedMode matches snapshot when in auto capability detection mode
     minimal={true}
     text="Coordinator/Overlord mode"
   />
-</Popover2>
+</Blueprint5.Popover>
 `;
 
 exports[`RestrictedMode matches snapshot when in manual capability detection mode 1`] = `
-<Popover2
+<Blueprint5.Popover
+  boundary="clippingParents"
+  captureDismiss={false}
   className="restricted-mode"
   content={
     <Memo(PopoverText)>
@@ -95,7 +115,23 @@ exports[`RestrictedMode matches snapshot when in manual capability detection mod
       </p>
     </Memo(PopoverText)>
   }
+  defaultIsOpen={false}
+  disabled={false}
+  fill={false}
+  hasBackdrop={false}
+  hoverCloseDelay={300}
+  hoverOpenDelay={150}
+  inheritDarkTheme={true}
+  interactionKind="click"
+  matchTargetWidth={false}
+  minimal={false}
+  openOnTargetFocus={true}
   position="bottom-right"
+  positioningStrategy="absolute"
+  shouldReturnFocusOnClose={false}
+  targetTagName="span"
+  transitionDuration={300}
+  usePortal={true}
 >
   <Blueprint5.Button
     icon="warning-sign"
@@ -103,5 +139,5 @@ exports[`RestrictedMode matches snapshot when in manual capability detection mod
     minimal={true}
     text="Coordinator/Overlord mode"
   />
-</Popover2>
+</Blueprint5.Popover>
 `;
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index d9b7e18a5ec0..e38109faeda0 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Intent, Position } from '@blueprintjs/core';
+import { Button, Intent, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { type JSX } from 'react';
 
 import { Capabilities } from '../../../helpers';
@@ -120,7 +119,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
   }
 
   return (
-    <Popover2
+    <Popover
       className="restricted-mode"
       content={
         <PopoverText>
@@ -179,6 +178,6 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       position={Position.BOTTOM_RIGHT}
     >
       <Button icon={IconNames.WARNING_SIGN} text={label} intent={Intent.WARNING} minimal />
-    </Popover2>
+    </Popover>
   );
 });
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index 116ecef1bcd8..f334d04e39c4 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`IntervalInput matches snapshot 1`] = `
   >
     <div>
       <span
-        class="bp5-popover2-target bp5-popover-target"
+        class="bp5-popover-target"
       >
         <button
           aria-expanded="false"
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index b50d8af6a85e..043779eeb85f 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -17,20 +17,13 @@
  */
 
 import type { Intent } from '@blueprintjs/core';
-import { Button, InputGroup, Position } from '@blueprintjs/core';
+import { Button, InputGroup, Popover, Position } from '@blueprintjs/core';
 import type { DateRange } from '@blueprintjs/datetime2';
-import { DateRangeInput2 } from '@blueprintjs/datetime2';
+import { DateRangePicker3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
-import {
-  dateToIsoDateString,
-  intervalToLocalDateRange,
-  localDateRangeToInterval,
-} from '../../utils';
-
-const BASIC_DATE_PARSER = (str: string) => new Date(str);
+import { intervalToLocalDateRange, localDateRangeToInterval } from '../../utils';
 
 export interface IntervalInputProps {
   interval: string;
@@ -48,25 +41,24 @@ export const IntervalInput = React.memo(function IntervalInput(props: IntervalIn
       placeholder={placeholder}
       rightElement={
         <div>
-          <Popover2
+          <Popover
             popoverClassName="calendar"
             content={
-              <DateRangeInput2
-                timePrecision="second"
+              <DateRangePicker3
                 value={intervalToLocalDateRange(interval)}
                 contiguousCalendarMonths={false}
                 reverseMonthAndYearMenus
                 onChange={(selectedRange: DateRange) => {
                   onValueChange(localDateRangeToInterval(selectedRange));
                 }}
-                formatDate={dateToIsoDateString}
-                parseDate={BASIC_DATE_PARSER}
+                timePickerProps={undefined}
+                shortcuts={false}
               />
             }
             position={Position.BOTTOM_RIGHT}
           >
             <Button rightIcon={IconNames.CALENDAR} />
-          </Popover2>
+          </Popover>
         </div>
       }
       onChange={(e: any) => {
diff --git a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
index bec7c00f0fc5..1d6fac4e37b2 100644
--- a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
+++ b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`MoreButton matches snapshot (empty) 1`] = `
 <span
-  class="bp5-popover2-target more-button bp5-popover-target"
+  class="more-button bp5-popover-target"
 >
   <button
     aria-expanded="false"
@@ -36,7 +36,7 @@ exports[`MoreButton matches snapshot (empty) 1`] = `
 
 exports[`MoreButton matches snapshot (full) 1`] = `
 <span
-  class="bp5-popover2-target more-button bp5-popover-target"
+  class="more-button bp5-popover-target"
 >
   <button
     aria-expanded="false"
diff --git a/web-console/src/components/more-button/more-button.tsx b/web-console/src/components/more-button/more-button.tsx
index 16157b34b87a..f8061318e8dd 100644
--- a/web-console/src/components/more-button/more-button.tsx
+++ b/web-console/src/components/more-button/more-button.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Menu, Position } from '@blueprintjs/core';
+import { Button, Menu, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 type OpenState = 'open' | 'alt-open';
@@ -40,7 +39,7 @@ export const MoreButton = React.memo(function MoreButton(props: MoreButtonProps)
   });
 
   return (
-    <Popover2
+    <Popover
       className="more-button"
       isOpen={Boolean(openState)}
       content={
@@ -56,6 +55,6 @@ export const MoreButton = React.memo(function MoreButton(props: MoreButtonProps)
       }}
     >
       <Button icon={IconNames.MORE} disabled={!childCount} title="More actions" />
-    </Popover2>
+    </Popover>
   );
 });
diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
index 6007559fb0d6..9ba090fa1102 100644
--- a/web-console/src/components/record-table-pane/record-table-pane.tsx
+++ b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Icon } from '@blueprintjs/core';
+import { Button, Icon, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { Column, QueryResult } from '@druid-toolkit/query';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
@@ -154,7 +153,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
                 const value = row.value;
                 return (
                   <div>
-                    <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                    <Popover content={<Deferred content={() => getCellMenu(column, i, value)} />}>
                       {numericColumnBraces[i] ? (
                         <BracedText
                           className="table-padding"
@@ -165,7 +164,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
                       ) : (
                         <TableCell value={value} unlimited />
                       )}
-                    </Popover2>
+                    </Popover>
                   </div>
                 );
               },
diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
index e28e58aa00d8..e1a7e8dd6a5f 100644
--- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -136,37 +136,36 @@ exports[`SegmentTimeline matches snapshot 1`] = `
       <div
         class="bp5-form-content"
       >
-        <span
-          class="bp5-popover2-target date-range-selector bp5-popover-target"
+        <div
+          aria-expanded="false"
+          aria-haspopup="menu"
+          class="bp5-control-group bp5-date-range-input bp5-popover-target bp5-fill"
         >
           <div
-            class="bp5-input-group bp5-read-only"
+            class="bp5-input-group bp5-fill"
           >
             <input
-              aria-expanded="false"
-              aria-haspopup="menu"
+              aria-disabled="false"
+              autocomplete="off"
               class="bp5-input"
-              readonly=""
-              style="padding-right: 0px;"
+              placeholder="Start date"
               type="text"
-              value="2021-03-09 ➔ 2021-06-09"
+              value="2021-03-08"
+            />
+          </div>
+          <div
+            class="bp5-input-group bp5-fill"
+          >
+            <input
+              aria-disabled="false"
+              autocomplete="off"
+              class="bp5-input"
+              placeholder="End date"
+              type="text"
+              value="2021-06-08"
             />
-            <span
-              class="bp5-input-action"
-            >
-              <button
-                class="bp5-button bp5-minimal"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-calendar"
-                  data-icon="calendar"
-                />
-              </button>
-            </span>
           </div>
-        </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/web-console/src/components/segment-timeline/segment-timeline.spec.tsx b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx
index c66772efb0d0..fc085956f8ad 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.spec.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.spec.tsx
@@ -29,10 +29,10 @@ jest.useFakeTimers('modern').setSystemTime(Date.parse('2021-06-08T12:34:56Z'));
 describe('SegmentTimeline', () => {
   it('.getSqlQuery', () => {
     expect(
-      SegmentTimeline.getSqlQuery(
+      SegmentTimeline.getSqlQuery([
         new Date('2020-01-01T00:00:00Z'),
         new Date('2021-02-01T00:00:00Z'),
-      ),
+      ]),
     ).toEqual(sane`
       SELECT
         "start", "end", "datasource",
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index 70dfd913f0a7..2aa2e25126ef 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -17,6 +17,8 @@
  */
 
 import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
+import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime2';
+import { DateRangeInput3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
 import type { ItemPredicate, ItemRenderer } from '@blueprintjs/select';
 import { Select2 } from '@blueprintjs/select';
@@ -34,7 +36,6 @@ import {
   QueryManager,
   uniq,
 } from '../../utils';
-import { DateRangeSelector } from '../date-range-selector/date-range-selector';
 import { Loader } from '../loader/loader';
 
 import type { BarUnitData } from './stacked-bar-chart';
@@ -42,14 +43,12 @@ import { StackedBarChart } from './stacked-bar-chart';
 
 import './segment-timeline.scss';
 
+export function isNonNullRange(range: DateRange): range is NonNullDateRange {
+  return range[0] != null && range[1] != null;
+}
+
 interface SegmentTimelineProps {
   capabilities: Capabilities;
-
-  // For testing:
-  dataQueryManager?: QueryManager<
-    { capabilities: Capabilities; startDate: Date; endDate: Date },
-    any
-  >;
 }
 
 type ActiveDataType = 'sizeData' | 'countData';
@@ -68,8 +67,8 @@ interface SegmentTimelineState {
   error?: Error;
   xScale: AxisScale<Date> | null;
   yScale: AxisScale<number> | null;
-  startDate: Date;
-  endDate: Date;
+  dateRange: NonNullDateRange;
+  selectedDateRange?: DateRange;
 }
 
 interface BarChartScales {
@@ -114,15 +113,15 @@ export class SegmentTimeline extends React.PureComponent<
     return SegmentTimeline.COLORS[index % SegmentTimeline.COLORS.length];
   }
 
-  static getSqlQuery(startDate: Date, endDate: Date): string {
+  static getSqlQuery(dateRange: NonNullDateRange): string {
     return `SELECT
   "start", "end", "datasource",
   COUNT(*) AS "count",
   SUM("size") AS "size"
 FROM sys.segments
 WHERE
-  '${startDate.toISOString()}' <= "start" AND
-  "end" <= '${endDate.toISOString()}' AND
+  '${dateRange[0].toISOString()}' <= "start" AND
+  "end" <= '${dateRange[1].toISOString()}' AND
   is_published = 1 AND
   is_overshadowed = 0
 GROUP BY 1, 2, 3
@@ -236,7 +235,7 @@ ORDER BY "start" DESC`;
   }
 
   private readonly dataQueryManager: QueryManager<
-    { capabilities: Capabilities; startDate: Date; endDate: Date },
+    { capabilities: Capabilities; dateRange: NonNullDateRange },
     any
   >;
 
@@ -244,9 +243,10 @@ ORDER BY "start" DESC`;
 
   constructor(props: SegmentTimelineProps) {
     super(props);
-    const startDate = ceilToUtcDay(new Date());
-    const endDate = new Date(startDate.valueOf());
-    startDate.setUTCMonth(startDate.getUTCMonth() - DEFAULT_TIME_SPAN_MONTHS);
+    const start = ceilToUtcDay(new Date());
+    const end = new Date(start.valueOf());
+    start.setUTCMonth(start.getUTCMonth() - DEFAULT_TIME_SPAN_MONTHS);
+    const dateRange: NonNullDateRange = [start, end];
 
     this.state = {
       chartWidth: 1, // Dummy init values to be replaced
@@ -261,84 +261,83 @@ ORDER BY "start" DESC`;
       loading: true,
       xScale: null,
       yScale: null,
-      startDate,
-      endDate,
+      dateRange,
     };
 
-    this.dataQueryManager =
-      props.dataQueryManager ||
-      new QueryManager({
-        processQuery: async ({ capabilities, startDate, endDate }) => {
-          let intervals: IntervalRow[];
-          let datasources: string[];
-          if (capabilities.hasSql()) {
-            intervals = await queryDruidSql({
-              query: SegmentTimeline.getSqlQuery(startDate, endDate),
-            });
-            datasources = uniq(intervals.map(r => r.datasource).sort());
-          } else if (capabilities.hasCoordinatorAccess()) {
-            const startIso = startDate.toISOString();
-
-            datasources = (await Api.instance.get(`/druid/coordinator/v1/datasources`)).data;
-            intervals = (
-              await Promise.all(
-                datasources.map(async datasource => {
-                  const intervalMap = (
-                    await Api.instance.get(
-                      `/druid/coordinator/v1/datasources/${Api.encodePath(
-                        datasource,
-                      )}/intervals?simple`,
-                    )
-                  ).data;
-
-                  return Object.keys(intervalMap)
-                    .map(interval => {
-                      const [start, end] = interval.split('/');
-                      const { count, size } = intervalMap[interval];
-                      return {
-                        start,
-                        end,
-                        datasource,
-                        count,
-                        size,
-                      };
-                    })
-                    .filter(a => startIso < a.start);
-                }),
-              )
+    this.dataQueryManager = new QueryManager({
+      processQuery: async ({ capabilities, dateRange }) => {
+        let intervals: IntervalRow[];
+        let datasources: string[];
+        if (capabilities.hasSql()) {
+          intervals = await queryDruidSql({
+            query: SegmentTimeline.getSqlQuery(dateRange),
+          });
+          datasources = uniq(intervals.map(r => r.datasource).sort());
+        } else if (capabilities.hasCoordinatorAccess()) {
+          const startIso = dateRange[0].toISOString();
+
+          datasources = (await Api.instance.get(`/druid/coordinator/v1/datasources`)).data;
+          intervals = (
+            await Promise.all(
+              datasources.map(async datasource => {
+                const intervalMap = (
+                  await Api.instance.get(
+                    `/druid/coordinator/v1/datasources/${Api.encodePath(
+                      datasource,
+                    )}/intervals?simple`,
+                  )
+                ).data;
+
+                return Object.keys(intervalMap)
+                  .map(interval => {
+                    const [start, end] = interval.split('/');
+                    const { count, size } = intervalMap[interval];
+                    return {
+                      start,
+                      end,
+                      datasource,
+                      count,
+                      size,
+                    };
+                  })
+                  .filter(a => startIso < a.start);
+              }),
             )
-              .flat()
-              .sort((a, b) => b.start.localeCompare(a.start));
-          } else {
-            throw new Error(`must have SQL or coordinator access`);
-          }
+          )
+            .flat()
+            .sort((a, b) => b.start.localeCompare(a.start));
+        } else {
+          throw new Error(`must have SQL or coordinator access`);
+        }
 
-          const data = SegmentTimeline.processRawData(intervals);
-          const stackedData = SegmentTimeline.calculateStackedData(data, datasources);
-          const singleDatasourceData = SegmentTimeline.calculateSingleDatasourceData(
-            data,
-            datasources,
-          );
-          return { data, datasources, stackedData, singleDatasourceData };
-        },
-        onStateChange: ({ data, loading, error }) => {
-          this.setState({
-            data: data ? data.data : undefined,
-            datasources: data ? data.datasources : [],
-            stackedData: data ? data.stackedData : undefined,
-            singleDatasourceData: data ? data.singleDatasourceData : undefined,
-            loading,
-            error,
-          });
-        },
-      });
+        const data = SegmentTimeline.processRawData(intervals);
+        const stackedData = SegmentTimeline.calculateStackedData(data, datasources);
+        const singleDatasourceData = SegmentTimeline.calculateSingleDatasourceData(
+          data,
+          datasources,
+        );
+        return { data, datasources, stackedData, singleDatasourceData };
+      },
+      onStateChange: ({ data, loading, error }) => {
+        this.setState({
+          data: data ? data.data : undefined,
+          datasources: data ? data.datasources : [],
+          stackedData: data ? data.stackedData : undefined,
+          singleDatasourceData: data ? data.singleDatasourceData : undefined,
+          loading,
+          error,
+        });
+      },
+    });
   }
 
   componentDidMount(): void {
     const { capabilities } = this.props;
-    const { startDate, endDate } = this.state;
+    const { dateRange } = this.state;
 
-    this.dataQueryManager.runQuery({ capabilities, startDate, endDate });
+    if (isNonNullRange(dateRange)) {
+      this.dataQueryManager.runQuery({ capabilities, dateRange });
+    }
   }
 
   componentWillUnmount(): void {
@@ -381,10 +380,9 @@ ORDER BY "start" DESC`;
       activeDataType,
       activeDatasource,
       singleDatasourceData,
-      startDate,
-      endDate,
+      dateRange,
     } = this.state;
-    if (!data || !Object.keys(data).length) return;
+    if (!data || !Object.keys(data).length || !isNonNullRange(dateRange)) return;
     const activeData = data[activeDataType];
 
     let yDomain: number[] = [
@@ -407,7 +405,7 @@ ORDER BY "start" DESC`;
     }
 
     const xScale: AxisScale<Date> = scaleUtc()
-      .domain([startDate, endDate])
+      .domain(dateRange)
       .range([0, chartWidth - this.chartMargin.left - this.chartMargin.right]);
 
     const yScale: AxisScale<number> = scaleLinear()
@@ -450,8 +448,7 @@ ORDER BY "start" DESC`;
       yScale,
       data,
       activeDatasource,
-      startDate,
-      endDate,
+      dateRange,
     } = this.state;
 
     if (loading) {
@@ -500,7 +497,7 @@ ORDER BY "start" DESC`;
     }
 
     const millisecondsPerDay = 24 * 60 * 60 * 1000;
-    const barCounts = (endDate.getTime() - startDate.getTime()) / millisecondsPerDay;
+    const barCounts = (dateRange[1].getTime() - dateRange[0].getTime()) / millisecondsPerDay;
     const barWidth = Math.max(
       0,
       (chartWidth - this.chartMargin.left - this.chartMargin.right) / barCounts,
@@ -529,7 +526,8 @@ ORDER BY "start" DESC`;
 
   render() {
     const { capabilities } = this.props;
-    const { datasources, activeDataType, activeDatasource, startDate, endDate } = this.state;
+    const { datasources, activeDataType, activeDatasource, dateRange, selectedDateRange } =
+      this.state;
 
     const filterDatasource: ItemPredicate<string> = (query, val, _index, exactMatch) => {
       const normalizedTitle = val.toLowerCase();
@@ -607,14 +605,15 @@ ORDER BY "start" DESC`;
           </FormGroup>
 
           <FormGroup label="Interval">
-            <DateRangeSelector
-              startDate={startDate}
-              endDate={endDate}
-              onChange={(startDate, endDate) => {
-                this.setState({ startDate, endDate }, () => {
-                  this.dataQueryManager.runQuery({ capabilities, startDate, endDate });
+            <DateRangeInput3
+              value={selectedDateRange || dateRange}
+              onChange={newDateRange => {
+                if (!isNonNullRange(newDateRange)) return;
+                this.setState({ dateRange: newDateRange, selectedDateRange: undefined }, () => {
+                  this.dataQueryManager.runQuery({ capabilities, dateRange: newDateRange });
                 });
               }}
+              fill
             />
           </FormGroup>
         </div>
diff --git a/web-console/src/components/segment-timeline/stacked-bar-chart.tsx b/web-console/src/components/segment-timeline/stacked-bar-chart.tsx
index 4a0d1f4a5a7c..f8188feeadbf 100644
--- a/web-console/src/components/segment-timeline/stacked-bar-chart.tsx
+++ b/web-console/src/components/segment-timeline/stacked-bar-chart.tsx
@@ -66,7 +66,10 @@ interface StackedBarChartProps {
   barWidth: number;
 }
 
-export const StackedBarChart = React.memo(function StackedBarChart(props: StackedBarChartProps) {
+export const StackedBarChart = React.forwardRef(function StackedBarChart(
+  props: StackedBarChartProps,
+  ref,
+) {
   const {
     activeDataType,
     svgWidth,
@@ -148,7 +151,7 @@ export const StackedBarChart = React.memo(function StackedBarChart(props: Stacke
   }
 
   return (
-    <div className="stacked-bar-chart">
+    <div className="stacked-bar-chart" ref={ref as any}>
       {hoverOn && (
         <>
           <div className="bar-chart-tooltip">
diff --git a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
index 2d0679df6580..98c91a13127e 100644
--- a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
+++ b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`SuggestibleInput matches snapshot 1`] = `
       class="bp5-input-action"
     >
       <span
-        class="bp5-popover2-target bp5-popover-target"
+        class="bp5-popover-target"
       >
         <button
           aria-expanded="false"
@@ -54,7 +54,7 @@ exports[`SuggestibleInput matches snapshot with escaped value 1`] = `
       class="bp5-input-action"
     >
       <span
-        class="bp5-popover2-target bp5-popover-target"
+        class="bp5-popover-target"
       >
         <button
           aria-expanded="false"
diff --git a/web-console/src/components/suggestible-input/suggestible-input.tsx b/web-console/src/components/suggestible-input/suggestible-input.tsx
index 3eac810730fe..6076e7447187 100644
--- a/web-console/src/components/suggestible-input/suggestible-input.tsx
+++ b/web-console/src/components/suggestible-input/suggestible-input.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Position } from '@blueprintjs/core';
+import { Button, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 
@@ -61,7 +60,7 @@ export const SuggestibleInput = React.memo(function SuggestibleInput(props: Sugg
       }}
       rightElement={
         suggestions && (
-          <Popover2
+          <Popover
             content={
               <SuggestionMenu suggestions={suggestions} onSuggest={handleSuggestionSelect} />
             }
@@ -69,7 +68,7 @@ export const SuggestibleInput = React.memo(function SuggestibleInput(props: Sugg
             autoFocus={false}
           >
             <Button icon={IconNames.CARET_DOWN} minimal />
-          </Popover2>
+          </Popover>
         )
       }
       {...rest}
diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index 579afc1fd8e1..038620ac06e6 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TableColumnSelector matches snapshot 1`] = `
 <span
-  class="bp5-popover2-target table-column-selector bp5-popover-target"
+  class="table-column-selector bp5-popover-target"
 >
   <button
     aria-expanded="false"
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index d838e98e04d3..7f5014ee22df 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Menu, Position } from '@blueprintjs/core';
+import { Button, Menu, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
@@ -72,7 +71,7 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
   const counterText = `(${columns.filter(isColumnShown).length}/${columns.length})`;
 
   return (
-    <Popover2
+    <Popover
       className="table-column-selector"
       content={checkboxes}
       position={Position.BOTTOM_RIGHT}
@@ -85,6 +84,6 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
       <Button rightIcon={IconNames.CARET_DOWN}>
         Columns <span className="counter">{counterText}</span>
       </Button>
-    </Popover2>
+    </Popover>
   );
 });
diff --git a/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx b/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
index f29cc42a49a3..631fa224aaf4 100644
--- a/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
+++ b/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Menu, MenuDivider, MenuItem, Popover } from '@blueprintjs/core';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { Filter } from 'react-table';
@@ -46,7 +45,7 @@ export const TableFilterableCell = React.memo(function TableFilterableCell(
   const { field, value, children, filters, enableComparisons, onFiltersChange } = props;
 
   return (
-    <Popover2
+    <Popover
       className="table-filterable-cell"
       content={
         <Deferred
@@ -67,6 +66,6 @@ export const TableFilterableCell = React.memo(function TableFilterableCell(
       }
     >
       {children}
-    </Popover2>
+    </Popover>
   );
 });
diff --git a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
index 0ea33ead11e4..566dd3f4c9ad 100644
--- a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
+++ b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
@@ -7,7 +7,9 @@ exports[`TimedButton matches snapshot 1`] = `
   <Blueprint5.Button
     onClick={[Function]}
   />
-  <Popover2
+  <Blueprint5.Popover
+    boundary="clippingParents"
+    captureDismiss={false}
     content={
       <Blueprint5.Menu>
         <Blueprint5.MenuDivider
@@ -25,10 +27,26 @@ exports[`TimedButton matches snapshot 1`] = `
         />
       </Blueprint5.Menu>
     }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={false}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    matchTargetWidth={false}
+    minimal={false}
+    openOnTargetFocus={true}
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
   >
     <Blueprint5.Button
       rightIcon="caret-down"
     />
-  </Popover2>
+  </Blueprint5.Popover>
 </Blueprint5.ButtonGroup>
 `;
diff --git a/web-console/src/components/timed-button/timed-button.tsx b/web-console/src/components/timed-button/timed-button.tsx
index cb275370b274..0b8a6a0498f1 100644
--- a/web-console/src/components/timed-button/timed-button.tsx
+++ b/web-console/src/components/timed-button/timed-button.tsx
@@ -17,9 +17,8 @@
  */
 
 import type { ButtonProps } from '@blueprintjs/core';
-import { Button, ButtonGroup, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { Button, ButtonGroup, Menu, MenuDivider, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
@@ -77,7 +76,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
   return (
     <ButtonGroup className={classNames('timed-button', className)}>
       <Button {...other} text={text} icon={icon} onClick={() => onRefresh(false)} />
-      <Popover2
+      <Popover
         content={
           <Menu>
             <MenuDivider title={label} />
@@ -93,7 +92,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
         }
       >
         <Button {...other} rightIcon={IconNames.CARET_DOWN} />
-      </Popover2>
+      </Popover>
     </ButtonGroup>
   );
 });
diff --git a/web-console/src/dialogs/compaction-config-dialog/compaction-config-dialog.tsx b/web-console/src/dialogs/compaction-config-dialog/compaction-config-dialog.tsx
index 985430755c74..ee286c00760c 100644
--- a/web-console/src/dialogs/compaction-config-dialog/compaction-config-dialog.tsx
+++ b/web-console/src/dialogs/compaction-config-dialog/compaction-config-dialog.tsx
@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Callout, Classes, Code, Dialog, Intent, Switch } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Button, Callout, Classes, Code, Dialog, Intent, Switch, Tooltip } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
 import type { FormJsonTabs } from '../../components';
@@ -164,9 +163,9 @@ export const CompactionConfigDialog = React.memo(function CompactionConfigDialog
           {compactionConfig ? (
             <Button text="Delete" intent={Intent.DANGER} onClick={onDelete} />
           ) : (
-            <Tooltip2 content="There is no compaction config currently set for this datasource">
+            <Tooltip content="There is no compaction config currently set for this datasource">
               <Button text="Delete" disabled intent={Intent.DANGER} />
-            </Tooltip2>
+            </Tooltip>
           )}
           <Button text="Close" onClick={onClose} />
           <Button
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
index b56f96baae2f..b90121890d05 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -146,7 +146,7 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 aria-expanded="false"
diff --git a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
index b0eb33fb467f..118cc72c3b2b 100644
--- a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
@@ -135,7 +135,7 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 aria-expanded="false"
diff --git a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index fe1c5ec3da47..20b4d1deb106 100644
--- a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -271,7 +271,7 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                       class="bp5-input-action"
                                     >
                                       <span
-                                        class="bp5-popover2-target bp5-popover-target"
+                                        class="bp5-popover-target"
                                       >
                                         <button
                                           aria-expanded="false"
diff --git a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
index 3f38bd1bc501..1f2664179047 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
@@ -194,7 +194,7 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 aria-expanded="false"
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
index d37337829e6d..2e7d619d7de8 100755
--- a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
@@ -224,7 +224,7 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 aria-expanded="false"
diff --git a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
index 500bbb0f3a56..7bd96a3df560 100644
--- a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
+++ b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
@@ -17,9 +17,8 @@
  */
 
 import type { IconName } from '@blueprintjs/core';
-import { Button, Classes, Dialog, Icon, Intent } from '@blueprintjs/core';
+import { Button, Classes, Dialog, Icon, Intent, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { ReactNode } from 'react';
 import React from 'react';
 
@@ -70,9 +69,9 @@ export const TableActionDialog = React.memo(function TableActionDialog(
       <div className={Classes.DIALOG_FOOTER}>
         {actionsMenu && (
           <div className="footer-actions-left">
-            <Popover2 content={actionsMenu}>
+            <Popover content={actionsMenu}>
               <Button icon={IconNames.WRENCH} text="Actions" rightIcon={IconNames.CARET_DOWN} />
-            </Popover2>
+            </Popover>
           </div>
         )}
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
diff --git a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
index 931f2ab7ffd6..572ae069eacc 100644
--- a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
@@ -224,7 +224,7 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 aria-expanded="false"
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index a32e7de82c1d..a1e4586adc25 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -20,8 +20,7 @@
 @import 'fontsource-open-sans/index.css';
 @import './blueprint-overrides';
 @import '@blueprintjs/core/src/blueprint';
-@import '@blueprintjs/datetime/src/blueprint-datetime';
-@import '@blueprintjs/popover2/src/blueprint-popover2';
+@import '@blueprintjs/datetime2/src/blueprint-datetime2';
 @import '@blueprintjs/select/src/blueprint-select';
 @import 'react-splitter-layout/lib/index';
 @import './react-table/react-table-base-styles';
diff --git a/web-console/src/entry.ts b/web-console/src/entry.tsx
similarity index 93%
rename from web-console/src/entry.ts
rename to web-console/src/entry.tsx
index a09004d34cce..25518ecdeb95 100644
--- a/web-console/src/entry.ts
+++ b/web-console/src/entry.tsx
@@ -20,6 +20,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import './bootstrap/ace';
 
+import { OverlaysProvider } from '@blueprintjs/core';
 import { QueryRunner } from '@druid-toolkit/query';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -100,13 +101,13 @@ QueryRunner.defaultQueryExecutor = (payload, isSql, cancelToken) => {
   return Api.instance.post(`/druid/v2${isSql ? '/sql' : ''}`, payload, { cancelToken });
 };
 
-const root = createRoot(container);
-
-root.render(
-  React.createElement(ConsoleApplication, {
-    defaultQueryContext: consoleConfig.defaultQueryContext,
-    mandatoryQueryContext: consoleConfig.mandatoryQueryContext,
-  }),
+createRoot(container).render(
+  <OverlaysProvider>
+    <ConsoleApplication
+      defaultQueryContext={consoleConfig.defaultQueryContext}
+      mandatoryQueryContext={consoleConfig.mandatoryQueryContext}
+    />
+  </OverlaysProvider>,
 );
 
 // ---------------------------------
diff --git a/web-console/src/react-table/react-table-inputs.tsx b/web-console/src/react-table/react-table-inputs.tsx
index 50937750b387..06bacd1a06df 100644
--- a/web-console/src/react-table/react-table-inputs.tsx
+++ b/web-console/src/react-table/react-table-inputs.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, HTMLSelect, Icon, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, HTMLSelect, Icon, InputGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import type { Column, ReactTableFunction } from 'react-table';
@@ -57,7 +56,7 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
       })}
       key={key}
       leftElement={
-        <Popover2
+        <Popover
           placement="bottom-start"
           minimal
           isOpen={menuOpen}
@@ -77,7 +76,7 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
           }
         >
           <Button className="filter-mode-button" icon={filterModeToIcon(mode)} minimal />
-        </Popover2>
+        </Popover>
       }
       value={focusedText ?? needle}
       onChange={e => {
diff --git a/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx b/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
index 04b2b0ea0277..634747dcd8b6 100644
--- a/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
+++ b/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, ButtonGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { formatInteger, nonEmptyArray, tickIcon } from '../../utils';
@@ -132,7 +131,7 @@ export const ReactTablePagination = React.memo(function ReactTablePagination(
           disabled={!canNext}
           onClick={() => changePage(page + 1)}
         />
-        <Popover2
+        <Popover
           position="top-left"
           disabled={!pageJumpMenuItem && !pageSizeChangeMenuItem}
           content={
@@ -143,7 +142,7 @@ export const ReactTablePagination = React.memo(function ReactTablePagination(
           }
         >
           <Button minimal text={pageInfo} />
-        </Popover2>
+        </Popover>
       </ButtonGroup>
       {showPageJumpDialog && (
         <PageJumpDialog
diff --git a/web-console/src/views/explore-view/control-pane/aggregates-input.tsx b/web-console/src/views/explore-view/control-pane/aggregates-input.tsx
index 3562cef89a93..a2b2485e22f4 100644
--- a/web-console/src/views/explore-view/control-pane/aggregates-input.tsx
+++ b/web-console/src/views/explore-view/control-pane/aggregates-input.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Classes, Position, Tag } from '@blueprintjs/core';
+import { Classes, Popover, Position, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { ExpressionMeta } from '@druid-toolkit/visuals-core';
 import classNames from 'classnames';
 import React from 'react';
@@ -53,7 +52,7 @@ export const AggregatesInput = function AggregatesInput(props: AggregatesInputPr
             {c.name}
           </Tag>
         ))}
-        <Popover2
+        <Popover
           position={Position.BOTTOM}
           content={
             <AggregateMenu
@@ -63,7 +62,7 @@ export const AggregatesInput = function AggregatesInput(props: AggregatesInputPr
           }
         >
           <Tag icon={IconNames.PLUS} interactive />
-        </Popover2>
+        </Popover>
       </div>
     </div>
   );
diff --git a/web-console/src/views/explore-view/control-pane/columns-input.tsx b/web-console/src/views/explore-view/control-pane/columns-input.tsx
index eff1d84f2f12..50e6b88c83ef 100644
--- a/web-console/src/views/explore-view/control-pane/columns-input.tsx
+++ b/web-console/src/views/explore-view/control-pane/columns-input.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Classes, Position, Tag } from '@blueprintjs/core';
+import { Classes, Popover, Position, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { ExpressionMeta } from '@druid-toolkit/visuals-core';
 import classNames from 'classnames';
 import type { JSX } from 'react';
@@ -121,7 +120,7 @@ export const ColumnsInput = function ColumnsInput(props: ColumnsInputProps) {
             {c.name}
           </Tag>
         ))}
-        <Popover2
+        <Popover
           position={Position.BOTTOM}
           content={
             pickerMenu ? (
@@ -135,7 +134,7 @@ export const ColumnsInput = function ColumnsInput(props: ColumnsInputProps) {
           }
         >
           <Tag icon={IconNames.PLUS} interactive />
-        </Popover2>
+        </Popover>
       </div>
     </div>
   );
diff --git a/web-console/src/views/explore-view/control-pane/control-pane.tsx b/web-console/src/views/explore-view/control-pane/control-pane.tsx
index 736d39564c88..029f020cd765 100644
--- a/web-console/src/views/explore-view/control-pane/control-pane.tsx
+++ b/web-console/src/views/explore-view/control-pane/control-pane.tsx
@@ -24,9 +24,9 @@ import {
   Menu,
   MenuItem,
   NumericInput,
+  Popover,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type {
   ExpressionMeta,
   OptionValue,
@@ -124,7 +124,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
         const selectedOption: OptionValue | undefined = controlOptions.find(o => o === value);
         return {
           element: (
-            <Popover2
+            <Popover
               fill
               position="bottom-left"
               minimal
@@ -150,7 +150,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
                 fill
                 rightElement={<Button icon={IconNames.CARET_DOWN} minimal />}
               />
-            </Popover2>
+            </Popover>
           ),
         };
       }
@@ -171,7 +171,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
       case 'column':
         return {
           element: (
-            <Popover2
+            <Popover
               fill
               position="bottom-left"
               minimal
@@ -191,7 +191,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
                 fill
                 rightElement={<Button icon={IconNames.CARET_DOWN} minimal />}
               />
-            </Popover2>
+            </Popover>
           ),
           onDropColumn: onValueChange,
         };
@@ -228,7 +228,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
       case 'aggregate': {
         return {
           element: (
-            <Popover2
+            <Popover
               fill
               position="bottom-left"
               minimal
@@ -248,7 +248,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
                 fill
                 rightElement={<Button icon={IconNames.CARET_DOWN} minimal />}
               />
-            </Popover2>
+            </Popover>
           ),
           onDropColumn: column => {
             const aggregates = getPossibleAggregateForColumn(column);
diff --git a/web-console/src/views/explore-view/control-pane/options-input.tsx b/web-console/src/views/explore-view/control-pane/options-input.tsx
index 143ddbf796e4..9eec12da8305 100644
--- a/web-console/src/views/explore-view/control-pane/options-input.tsx
+++ b/web-console/src/views/explore-view/control-pane/options-input.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Classes, Menu, MenuItem, Position, Tag } from '@blueprintjs/core';
+import { Classes, Menu, MenuItem, Popover, Position, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { OptionValue, ParameterDefinition } from '@druid-toolkit/visuals-core';
 import { getPluginOptionLabel } from '@druid-toolkit/visuals-core';
 import classNames from 'classnames';
@@ -58,7 +57,7 @@ export const OptionsInput = function OptionsInput(props: OptionsInputProps) {
             {getPluginOptionLabel(o, parameter)}
           </Tag>
         ))}
-        <Popover2
+        <Popover
           position={Position.BOTTOM}
           content={
             <Menu>
@@ -75,7 +74,7 @@ export const OptionsInput = function OptionsInput(props: OptionsInputProps) {
           }
         >
           <Tag icon={IconNames.PLUS} interactive />
-        </Popover2>
+        </Popover>
       </div>
     </div>
   );
diff --git a/web-console/src/views/explore-view/filter-pane/filter-pane.tsx b/web-console/src/views/explore-view/filter-pane/filter-pane.tsx
index 87022fbe411c..4692cda170c6 100644
--- a/web-console/src/views/explore-view/filter-pane/filter-pane.tsx
+++ b/web-console/src/views/explore-view/filter-pane/filter-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button } from '@blueprintjs/core';
+import { Button, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { FilterPattern, SqlExpression } from '@druid-toolkit/query';
 import { filterPatternsToExpression, fitFilterPatterns } from '@druid-toolkit/query';
 import type { ExpressionMeta } from '@druid-toolkit/visuals-core';
@@ -78,7 +77,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
         return (
           <div className="filter-pill" key={i}>
             {dataset ? (
-              <Popover2
+              <Popover
                 isOpen={i === menuIndex}
                 onClose={() => setMenuIndex(-1)}
                 content={
@@ -103,7 +102,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
                   text={formatPatternWithoutNegation(pattern)}
                   onClick={() => setMenuIndex(i)}
                 />
-              </Popover2>
+              </Popover>
             ) : (
               <Button
                 className={classNames('filter-text-button', { negated: pattern.negated })}
@@ -123,7 +122,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
         );
       })}
       {dataset && (
-        <Popover2
+        <Popover
           className="add-button"
           isOpen={Boolean(menuNew)}
           position="bottom"
@@ -144,7 +143,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
           }
         >
           <Button icon={IconNames.PLUS} onClick={() => setMenuNew({})} minimal />
-        </Popover2>
+        </Popover>
       )}
     </DroppableContainer>
   );
diff --git a/web-console/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx b/web-console/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx
index 4f79156175be..ebc56aefe6ac 100644
--- a/web-console/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx
+++ b/web-console/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx
@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Icon, Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, Icon, Intent, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { Column, QueryResult, SqlExpression } from '@druid-toolkit/query';
 import { SqlColumn, SqlLiteral, trimString } from '@druid-toolkit/query';
 import classNames from 'classnames';
@@ -479,7 +478,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
               return {
                 Header() {
                   return (
-                    <Popover2 content={<Deferred content={() => getHeaderMenu(column, i)} />}>
+                    <Popover content={<Deferred content={() => getHeaderMenu(column, i)} />}>
                       <div className="clickable-cell">
                         <div className="output-name">
                           {icon && <Icon className="type-icon" icon={icon} size={12} />}
@@ -487,7 +486,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                           {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
                         </div>
                       </div>
-                    </Popover2>
+                    </Popover>
                   );
                 },
                 headerClassName: getHeaderClassName(h),
@@ -497,9 +496,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                   const formatter = columnHints?.get(h)?.formatter || formatNumber;
                   return (
                     <div>
-                      <Popover2
-                        content={<Deferred content={() => getCellMenu(column, i, value)} />}
-                      >
+                      <Popover content={<Deferred content={() => getCellMenu(column, i, value)} />}>
                         {numericColumnBraces[i] ? (
                           <BracedText
                             className="table-padding"
@@ -510,7 +507,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                         ) : (
                           <TableCell value={value} unlimited />
                         )}
-                      </Popover2>
+                      </Popover>
                     </div>
                   );
                 },
diff --git a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
index 5109ce77bd15..e010a8c94110 100644
--- a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
+++ b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Classes, Icon, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { Classes, Icon, InputGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { ExpressionMeta } from '@druid-toolkit/visuals-core';
 import classNames from 'classnames';
 import React, { useState } from 'react';
@@ -53,7 +52,7 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
         {filterMap(columns, (c, i) => {
           if (!caseInsensitiveContains(c.name, columnSearch)) return;
           return (
-            <Popover2
+            <Popover
               className="resource-item"
               key={i}
               position="right"
@@ -85,7 +84,7 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
                   {c.name}
                 </div>
               </div>
-            </Popover2>
+            </Popover>
           );
         })}
       </div>
diff --git a/web-console/src/views/explore-view/source-pane/source-pane.tsx b/web-console/src/views/explore-view/source-pane/source-pane.tsx
index 9b075f5536f0..2208bc32a390 100644
--- a/web-console/src/views/explore-view/source-pane/source-pane.tsx
+++ b/web-console/src/views/explore-view/source-pane/source-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Menu, MenuDivider, MenuItem, Position } from '@blueprintjs/core';
+import { Button, Menu, MenuDivider, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { useQueryManager } from '../../../hooks';
@@ -47,7 +46,7 @@ export const SourcePane = React.memo(function SourcePane(props: SourcePaneProps)
   });
 
   return (
-    <Popover2
+    <Popover
       className="source-pane"
       disabled={disabled}
       minimal
@@ -69,6 +68,6 @@ export const SourcePane = React.memo(function SourcePane(props: SourcePaneProps)
         minimal
         disabled={disabled}
       />
-    </Popover2>
+    </Popover>
   );
 });
diff --git a/web-console/src/views/explore-view/tile-picker/tile-picker.tsx b/web-console/src/views/explore-view/tile-picker/tile-picker.tsx
index 5dc39d2572bc..cefb37b0f5d7 100644
--- a/web-console/src/views/explore-view/tile-picker/tile-picker.tsx
+++ b/web-console/src/views/explore-view/tile-picker/tile-picker.tsx
@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Button, ButtonGroup, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { JSX } from 'react';
 import React from 'react';
 
@@ -42,7 +41,7 @@ export const TilePicker = React.memo(function TilePicker(props: TilePickerProps<
   const selectedTileManifest = modules.find(module => module.moduleName === selectedTileName);
   return (
     <ButtonGroup className="tile-picker" fill>
-      <Popover2
+      <Popover
         className="picker-button"
         minimal
         fill
@@ -67,11 +66,11 @@ export const TilePicker = React.memo(function TilePicker(props: TilePickerProps<
           minimal
           rightIcon={IconNames.CARET_DOWN}
         />
-      </Popover2>
+      </Popover>
       {moreMenu && (
-        <Popover2 className="more-button" position={Position.BOTTOM_RIGHT} content={moreMenu}>
+        <Popover className="more-button" position={Position.BOTTOM_RIGHT} content={moreMenu}>
           <Button minimal icon={IconNames.MORE} />
-        </Popover2>
+        </Popover>
       )}
     </ButtonGroup>
   );
diff --git a/web-console/src/views/home-view/status-card/status-card.tsx b/web-console/src/views/home-view/status-card/status-card.tsx
index f1db97ac6c6e..43b5341d9092 100644
--- a/web-console/src/views/home-view/status-card/status-card.tsx
+++ b/web-console/src/views/home-view/status-card/status-card.tsx
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
+import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { StatusDialog } from '../../../dialogs/status-dialog/status-dialog';
@@ -89,7 +89,7 @@ export const StatusCard = React.memo(function StatusCard(props: StatusCardProps)
           </>
         )}
         {nullModeDetection && (
-          <Tooltip2
+          <Tooltip
             content={
               <div>
                 <p>
@@ -102,7 +102,7 @@ export const StatusCard = React.memo(function StatusCard(props: StatusCardProps)
             }
           >
             <p>{summarizeNullModeDetection(nullModeDetection)}</p>
-          </Tooltip2>
+          </Tooltip>
         )}
       </HomeViewCard>
       {showStatusDialog && (
diff --git a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
index 602ca539f8e0..0c6743c39eb8 100644
--- a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`FormEditor matches snapshot 1`] = `
           class="bp5-text-muted"
         >
           <span
-            class="bp5-popover2-target info-popover bp5-popover-target"
+            class="info-popover bp5-popover-target"
           >
             <span
               aria-expanded="false"
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 555ba6f4a09a..0fdf68c88c1f 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -31,6 +31,7 @@ import {
   Intent,
   Menu,
   MenuItem,
+  Popover,
   Radio,
   RadioGroup,
   Switch,
@@ -38,7 +39,6 @@ import {
   TextArea,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import * as JSONBig from 'json-bigint-native';
 import memoize from 'memoize-one';
@@ -2532,9 +2532,9 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               </FormGroup>
               {schemaToolsMenu && (
                 <FormGroup>
-                  <Popover2 content={schemaToolsMenu}>
+                  <Popover content={schemaToolsMenu}>
                     <Button icon={IconNames.BUILD} />
-                  </Popover2>
+                  </Popover>
                 </FormGroup>
               )}
             </>
@@ -2895,25 +2895,25 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       >
         {selectedDimensionSpec.index !== -1 && (
           <FormGroup>
-            <Popover2 content={reorderDimensionMenu}>
+            <Popover content={reorderDimensionMenu}>
               <Button
                 icon={IconNames.ARROWS_HORIZONTAL}
                 text="Reorder dimension"
                 rightIcon={IconNames.CARET_DOWN}
               />
-            </Popover2>
+            </Popover>
           </FormGroup>
         )}
         {selectedDimensionSpec.index !== -1 && deepGet(spec, 'spec.dataSchema.metricsSpec') && (
           <FormGroup>
-            <Popover2 content={convertToMetricMenu}>
+            <Popover content={convertToMetricMenu}>
               <Button
                 icon={IconNames.EXCHANGE}
                 text="Convert to metric"
                 rightIcon={IconNames.CARET_DOWN}
                 disabled={dimensions.length <= 1}
               />
-            </Popover2>
+            </Popover>
           </FormGroup>
         )}
       </FormEditor>
@@ -2978,13 +2978,13 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           schemaMode === 'fixed' &&
           selectedMetricSpecFieldName && (
             <FormGroup>
-              <Popover2 content={convertToDimensionMenu}>
+              <Popover content={convertToDimensionMenu}>
                 <Button
                   icon={IconNames.EXCHANGE}
                   text="Convert to dimension"
                   rightIcon={IconNames.CARET_DOWN}
                 />
-              </Popover2>
+              </Popover>
             </FormGroup>
           )}
       </FormEditor>
diff --git a/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx
index c6b83b0f6dfc..03ea12c738fa 100644
--- a/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx
+++ b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, FormGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, FormGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { QueryResult, SqlExpression } from '@druid-toolkit/query';
 import { F } from '@druid-toolkit/query';
 import type { JSX } from 'react';
@@ -151,7 +150,7 @@ export const ColumnActions = React.memo(function ExpressionEditor(props: ColumnA
 
             const underlyingSelectExpression = expression.getUnderlyingExpression();
             convertButton = (
-              <Popover2
+              <Popover
                 content={
                   <Menu>
                     <Menu>
@@ -228,7 +227,7 @@ export const ColumnActions = React.memo(function ExpressionEditor(props: ColumnA
                 }
               >
                 <Button icon={IconNames.EXCHANGE} text="Convert to metric" />
-              </Popover2>
+              </Popover>
             );
           } else {
             const groupByExpression = convertToGroupByExpression(expression);
@@ -261,9 +260,9 @@ export const ColumnActions = React.memo(function ExpressionEditor(props: ColumnA
       <div className="title">Column actions</div>
       {transformMenuItems.length > 0 && (
         <FormGroup>
-          <Popover2 content={<Menu>{transformMenuItems}</Menu>}>
+          <Popover content={<Menu>{transformMenuItems}</Menu>}>
             <Button icon={IconNames.FUNCTION} text="Transform" />
-          </Popover2>
+          </Popover>
         </FormGroup>
       )}
       {removeFilterButton && <FormGroup>{removeFilterButton}</FormGroup>}
diff --git a/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx
index a981ce4140b1..6e1cd3092bc0 100644
--- a/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx
+++ b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx
@@ -24,10 +24,10 @@ import {
   Menu,
   MenuDivider,
   MenuItem,
+  Popover,
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { QueryResult } from '@druid-toolkit/query';
 import { F, SqlExpression, SqlFunction, SqlType } from '@druid-toolkit/query';
 import type { JSX } from 'react';
@@ -187,7 +187,7 @@ export const ColumnEditor = React.memo(function ColumnEditor(props: ColumnEditor
         );
 
         typeButton = (
-          <Popover2
+          <Popover
             position={Position.BOTTOM_LEFT}
             minimal
             content={
@@ -252,7 +252,7 @@ export const ColumnEditor = React.memo(function ColumnEditor(props: ColumnEditor
               }`}
               rightIcon={IconNames.CARET_DOWN}
             />
-          </Popover2>
+          </Popover>
         );
       }
     }
diff --git a/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
index 64712105da4e..acc5ce39d449 100644
--- a/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
+++ b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
@@ -24,9 +24,9 @@ import {
   Intent,
   Radio,
   RadioGroup,
+  Tooltip,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
@@ -88,9 +88,9 @@ export const DestinationForm = React.memo(function DestinationForm(props: Destin
             placeholder="Choose a name"
             rightElement={
               existingTables.includes(table) ? (
-                <Tooltip2 content="Table name already exists">
+                <Tooltip content="Table name already exists">
                   <Button icon={IconNames.DELETE} intent={Intent.DANGER} minimal />
-                </Tooltip2>
+                </Tooltip>
               ) : undefined
             }
           />
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
index 0b9da6651768..f09e164cbe88 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Icon } from '@blueprintjs/core';
+import { Icon, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { QueryResult, SqlExpression } from '@druid-toolkit/query';
 import React, { useMemo } from 'react';
 
@@ -67,7 +66,7 @@ export const ColumnList = function ColumnList(props: ColumnListProps) {
           {metrics ? (
             <>
               {'Dimensions '}
-              <Popover2
+              <Popover
                 className="info-popover"
                 content={
                   <PopoverText>
@@ -82,7 +81,7 @@ export const ColumnList = function ColumnList(props: ColumnListProps) {
                 position="left-bottom"
               >
                 <Icon icon={IconNames.INFO_SIGN} size={14} />
-              </Popover2>
+              </Popover>
             </>
           ) : (
             'Columns'
@@ -112,7 +111,7 @@ export const ColumnList = function ColumnList(props: ColumnListProps) {
         <div className="list-column">
           <div className="list-label">
             {'Metrics '}
-            <Popover2
+            <Popover
               className="info-popover"
               content={
                 <PopoverText>
@@ -128,7 +127,7 @@ export const ColumnList = function ColumnList(props: ColumnListProps) {
               position="left-bottom"
             >
               <Icon icon={IconNames.INFO_SIGN} size={14} />
-            </Popover2>
+            </Popover>
           </div>
           <div className="list-container">
             {filterMap(metrics, (ex, i) => {
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
index 12e127164269..aa5e4439f0a2 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Icon } from '@blueprintjs/core';
+import { Icon, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { Column, QueryResult, SqlExpression, SqlQuery } from '@druid-toolkit/query';
 import { SqlAlias, SqlFunction, SqlStar } from '@druid-toolkit/query';
 import classNames from 'classnames';
@@ -158,7 +157,7 @@ export const PreviewTable = React.memo(function PreviewTable(props: PreviewTable
               const value = row.value;
               return (
                 <div>
-                  <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                  <Popover content={<Deferred content={() => getCellMenu(column, i, value)} />}>
                     {numericColumnBraces[i] ? (
                       <BracedText
                         className="table-padding"
@@ -169,7 +168,7 @@ export const PreviewTable = React.memo(function PreviewTable(props: PreviewTable
                     ) : (
                       <TableCell value={value} unlimited />
                     )}
-                  </Popover2>
+                  </Popover>
                 </div>
               );
             },
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
index d9a1fdba6acc..735a9ac2837f 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
@@ -26,10 +26,10 @@ import {
   Menu,
   MenuDivider,
   MenuItem,
+  Popover,
   Tag,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import {
   C,
   Column,
@@ -555,7 +555,7 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
       subtitle="Configure schema"
       toolbar={
         <>
-          <Popover2
+          <Popover
             position="bottom"
             content={
               <Menu>
@@ -586,9 +586,9 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
                 {ingestQueryPattern ? ingestQueryPattern.filters.length : '?'}
               </Tag>
             </Button>
-          </Popover2>
+          </Popover>
           {ingestQueryPattern && (
-            <Popover2
+            <Popover
               position="bottom"
               content={
                 <Menu>
@@ -624,10 +624,10 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
                     : ingestQueryPattern.partitionedBy}
                 </Tag>
               </Button>
-            </Popover2>
+            </Popover>
           )}
           {ingestQueryPattern && (
-            <Popover2
+            <Popover
               position="bottom"
               content={
                 <Menu>
@@ -683,7 +683,7 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
                   {ingestQueryPattern.clusteredBy.length}
                 </Tag>
               </Button>
-            </Popover2>
+            </Popover>
           )}
           <Button
             icon={IconNames.COMPRESSED}
@@ -751,7 +751,7 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
           </div>
           {effectiveMode !== 'sql' && ingestQueryPattern && (
             <div className="control-line right">
-              <Popover2
+              <Popover
                 className="add-column-control"
                 position="bottom"
                 content={
@@ -805,7 +805,7 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
                 }
               >
                 <Button className="add-column" icon={IconNames.PLUS} text="Add column" />
-              </Popover2>
+              </Popover>
               <ClearableInput
                 className="column-filter-control"
                 value={columnSearch}
diff --git a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
index 872b2a1826b9..4dc9526c12cf 100644
--- a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
+++ b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
@@ -225,7 +225,9 @@ exports[`SupervisorsView matches snapshot 1`] = `
           "Header": <React.Fragment>
             Stats
             <br />
-            <Popover2
+            <Blueprint5.Popover
+              boundary="clippingParents"
+              captureDismiss={false}
               content={
                 <Blueprint5.Menu>
                   <Blueprint5.MenuItem
@@ -260,7 +262,23 @@ exports[`SupervisorsView matches snapshot 1`] = `
                   />
                 </Blueprint5.Menu>
               }
+              defaultIsOpen={false}
+              disabled={false}
+              fill={false}
+              hasBackdrop={false}
+              hoverCloseDelay={300}
+              hoverOpenDelay={150}
+              inheritDarkTheme={true}
+              interactionKind="click"
+              matchTargetWidth={false}
+              minimal={false}
+              openOnTargetFocus={true}
               position="bottom"
+              positioningStrategy="absolute"
+              shouldReturnFocusOnClose={false}
+              targetTagName="span"
+              transitionDuration={300}
+              usePortal={true}
             >
               <i
                 className="title-button"
@@ -273,7 +291,7 @@ exports[`SupervisorsView matches snapshot 1`] = `
                   tagName="span"
                 />
               </i>
-            </Popover2>
+            </Blueprint5.Popover>
           </React.Fragment>,
           "accessor": "stats",
           "className": "padded",
diff --git a/web-console/src/views/supervisors-view/supervisors-view.tsx b/web-console/src/views/supervisors-view/supervisors-view.tsx
index 792b16a58ce9..60e340034ebf 100644
--- a/web-console/src/views/supervisors-view/supervisors-view.tsx
+++ b/web-console/src/views/supervisors-view/supervisors-view.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Icon, Intent, Menu, MenuItem, Position, Tag } from '@blueprintjs/core';
+import { Icon, Intent, Menu, MenuItem, Popover, Position, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import { SqlExpression } from '@druid-toolkit/query';
 import * as JSONBig from 'json-bigint-native';
 import type { JSX } from 'react';
@@ -789,7 +788,7 @@ export class SupervisorsView extends React.PureComponent<
           {
             Header: twoLines(
               'Stats',
-              <Popover2
+              <Popover
                 position={Position.BOTTOM}
                 content={
                   <Menu>
@@ -809,7 +808,7 @@ export class SupervisorsView extends React.PureComponent<
                 <i className="title-button">
                   {getRowStatsKeyTitle(statsKey)} <Icon icon={IconNames.CARET_DOWN} />
                 </i>
-              </Popover2>,
+              </Popover>,
             ),
             id: 'stats',
             width: 300,
diff --git a/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
index 69c27731a6f2..125cb0e8da61 100644
--- a/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
@@ -31,7 +31,9 @@ exports[`ColumnTree matches snapshot 1`] = `
       <Blueprint5.ButtonGroup
         minimal={true}
       >
-        <Popover2
+        <Blueprint5.Popover
+          boundary="clippingParents"
+          captureDismiss={false}
           content={
             <Blueprint5.Menu>
               <Blueprint5.MenuDivider
@@ -69,12 +71,28 @@ exports[`ColumnTree matches snapshot 1`] = `
               />
             </Blueprint5.Menu>
           }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          matchTargetWidth={false}
+          minimal={false}
+          openOnTargetFocus={true}
           position="bottom-left"
+          positioningStrategy="absolute"
+          shouldReturnFocusOnClose={false}
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
         >
           <Blueprint5.Button
             icon="settings"
           />
-        </Popover2>
+        </Blueprint5.Popover>
       </Blueprint5.ButtonGroup>
     }
     value=""
@@ -98,17 +116,35 @@ exports[`ColumnTree matches snapshot 1`] = `
                   title="TIMESTAMP"
                 />,
                 "id": "__time",
-                "label": <Popover2
+                "label": <Blueprint5.Popover
                   autoFocus={false}
+                  boundary="clippingParents"
+                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
+                  defaultIsOpen={false}
+                  disabled={false}
+                  fill={false}
+                  hasBackdrop={false}
+                  hoverCloseDelay={300}
+                  hoverOpenDelay={150}
+                  inheritDarkTheme={true}
+                  interactionKind="click"
+                  matchTargetWidth={false}
+                  minimal={false}
+                  openOnTargetFocus={true}
                   position="right"
+                  positioningStrategy="absolute"
+                  shouldReturnFocusOnClose={false}
+                  targetTagName="span"
+                  transitionDuration={300}
+                  usePortal={true}
                 >
                   __time
-                </Popover2>,
+                </Blueprint5.Popover>,
               },
               {
                 "icon": <Blueprint5.Icon
@@ -121,17 +157,35 @@ exports[`ColumnTree matches snapshot 1`] = `
                   title="BIGINT"
                 />,
                 "id": "added",
-                "label": <Popover2
+                "label": <Blueprint5.Popover
                   autoFocus={false}
+                  boundary="clippingParents"
+                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
+                  defaultIsOpen={false}
+                  disabled={false}
+                  fill={false}
+                  hasBackdrop={false}
+                  hoverCloseDelay={300}
+                  hoverOpenDelay={150}
+                  inheritDarkTheme={true}
+                  interactionKind="click"
+                  matchTargetWidth={false}
+                  minimal={false}
+                  openOnTargetFocus={true}
                   position="right"
+                  positioningStrategy="absolute"
+                  shouldReturnFocusOnClose={false}
+                  targetTagName="span"
+                  transitionDuration={300}
+                  usePortal={true}
                 >
                   added
-                </Popover2>,
+                </Blueprint5.Popover>,
               },
               {
                 "icon": <Blueprint5.Icon
@@ -144,33 +198,69 @@ exports[`ColumnTree matches snapshot 1`] = `
                   title="FLOAT"
                 />,
                 "id": "addedBy10",
-                "label": <Popover2
+                "label": <Blueprint5.Popover
                   autoFocus={false}
+                  boundary="clippingParents"
+                  captureDismiss={false}
                   content={
                     <Memo(Deferred)
                       content={[Function]}
                     />
                   }
+                  defaultIsOpen={false}
+                  disabled={false}
+                  fill={false}
+                  hasBackdrop={false}
+                  hoverCloseDelay={300}
+                  hoverOpenDelay={150}
+                  inheritDarkTheme={true}
+                  interactionKind="click"
+                  matchTargetWidth={false}
+                  minimal={false}
+                  openOnTargetFocus={true}
                   position="right"
+                  positioningStrategy="absolute"
+                  shouldReturnFocusOnClose={false}
+                  targetTagName="span"
+                  transitionDuration={300}
+                  usePortal={true}
                 >
                   addedBy10
-                </Popover2>,
+                </Blueprint5.Popover>,
               },
             ],
             "className": undefined,
             "icon": "th",
             "id": "wikipedia",
             "isExpanded": true,
-            "label": <Popover2
+            "label": <Blueprint5.Popover
+              boundary="clippingParents"
+              captureDismiss={false}
               content={
                 <Memo(Deferred)
                   content={[Function]}
                 />
               }
+              defaultIsOpen={false}
+              disabled={false}
+              fill={false}
+              hasBackdrop={false}
+              hoverCloseDelay={300}
+              hoverOpenDelay={150}
+              inheritDarkTheme={true}
+              interactionKind="click"
+              matchTargetWidth={false}
+              minimal={false}
+              openOnTargetFocus={true}
               position="right"
+              positioningStrategy="absolute"
+              shouldReturnFocusOnClose={false}
+              targetTagName="span"
+              transitionDuration={300}
+              usePortal={true}
             >
               wikipedia
-            </Popover2>,
+            </Blueprint5.Popover>,
           },
         ]
       }
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree.tsx b/web-console/src/views/workbench-view/column-tree/column-tree.tsx
index 6684dd356d31..06a0b825b7cd 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/workbench-view/column-tree/column-tree.tsx
@@ -27,11 +27,11 @@ import {
   Menu,
   MenuDivider,
   MenuItem,
+  Popover,
   Position,
   Tree,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { SqlExpression } from '@druid-toolkit/query';
 import {
   C,
@@ -179,6 +179,8 @@ export interface ColumnTreeState {
   searchString: string;
   searchMode: SearchMode;
   prevSearchHash?: string;
+  expandedTables: Map<string, boolean>;
+  prevExpandedTables: Map<string, boolean>;
 }
 
 function computeSearchHash(searchString: string, searchMode: SearchMode): string {
@@ -218,12 +220,14 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
       onQueryChange,
       highlightTable,
     } = props;
-    const { searchString, searchMode } = state;
+    const { searchString, searchMode, expandedTables, prevExpandedTables } = state;
     const searchHash = computeSearchHash(searchString, searchMode);
 
     if (
       columnMetadata &&
-      (columnMetadata !== state.prevColumnMetadata || searchHash !== state.prevSearchHash)
+      (columnMetadata !== state.prevColumnMetadata ||
+        searchHash !== state.prevSearchHash ||
+        expandedTables.size !== prevExpandedTables.size)
     ) {
       const lowerSearchString = searchString.toLowerCase();
       const isSearching = Boolean(lowerSearchString);
@@ -252,11 +256,12 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
               icon: IconNames.TH,
               className: tableName === highlightTable ? 'highlight' : undefined,
               isExpanded:
-                isSearching &&
-                (searchMode === 'columns-only' ||
-                  !tableName.toLowerCase().includes(lowerSearchString)),
+                expandedTables.has(tableName) ||
+                (isSearching &&
+                  (searchMode === 'columns-only' ||
+                    !tableName.toLowerCase().includes(lowerSearchString))),
               label: (
-                <Popover2
+                <Popover
                   position={Position.RIGHT}
                   content={
                     <Deferred
@@ -460,7 +465,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                   }
                 >
                   {tableName}
-                </Popover2>
+                </Popover>
               ),
               childNodes: metadata.map(
                 (columnData): TreeNodeInfo => ({
@@ -475,7 +480,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                     />
                   ),
                   label: (
-                    <Popover2
+                    <Popover
                       position={Position.RIGHT}
                       autoFocus={false}
                       content={
@@ -554,7 +559,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                       }
                     >
                       {columnData.COLUMN_NAME}
-                    </Popover2>
+                    </Popover>
                   ),
                 }),
               ),
@@ -595,6 +600,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
         selectedTreeIndex,
         currentSchemaSubtree,
         prevSearchHash: searchHash,
+        prevExpandedTables: expandedTables,
       };
     }
     return null;
@@ -606,6 +612,8 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
       selectedTreeIndex: -1,
       searchString: '',
       searchMode: 'tables-and-columns',
+      expandedTables: new Map(),
+      prevExpandedTables: new Map(),
     };
   }
 
@@ -646,7 +654,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
             {searchString !== '' && (
               <Button icon={IconNames.CROSS} onClick={() => this.setState({ searchString: '' })} />
             )}
-            <Popover2
+            <Popover
               position="bottom-left"
               content={
                 <Menu>
@@ -663,7 +671,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
               }
             >
               <Button icon={IconNames.SETTINGS} />
-            </Popover2>
+            </Popover>
           </ButtonGroup>
         }
       />
@@ -686,13 +694,19 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
   };
 
   private readonly handleNodeCollapse = (nodeData: TreeNodeInfo) => {
-    nodeData.isExpanded = false;
-    this.forceUpdate();
+    const expandedTables = new Map(this.state.expandedTables);
+    expandedTables.delete(String(nodeData.id));
+    this.setState({
+      expandedTables,
+    });
   };
 
   private readonly handleNodeExpand = (nodeData: TreeNodeInfo) => {
-    nodeData.isExpanded = true;
-    this.forceUpdate();
+    const expandedTables = new Map(this.state.expandedTables);
+    expandedTables.set(String(nodeData.id), true);
+    this.setState({
+      expandedTables,
+    });
   };
 
   render() {
diff --git a/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx b/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx
index 0258233338cd..0ffa3125985f 100644
--- a/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx
+++ b/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { AnchorButton, Button, Intent, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { AnchorButton, Button, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import ReactTable from 'react-table';
 
@@ -112,7 +111,7 @@ export const DestinationPagesPane = React.memo(function DestinationPagesPane(
       </p>
       <p>
         Format when downloading:{' '}
-        <Popover2
+        <Popover
           minimal
           position={Position.BOTTOM_LEFT}
           content={
@@ -133,7 +132,7 @@ export const DestinationPagesPane = React.memo(function DestinationPagesPane(
             text={RESULT_FORMAT_LABEL[desiredResultFormat]}
             rightIcon={IconNames.CARET_DOWN}
           />
-        </Popover2>{' '}
+        </Popover>{' '}
         {pages.length > 1 && (
           <Button
             intent={Intent.PRIMARY}
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
index 47d85e16f3fe..e8ee6d88b207 100644
--- a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Icon, Intent } from '@blueprintjs/core';
+import { Button, Icon, Intent, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import * as JSONBig from 'json-bigint-native';
 import React from 'react';
@@ -552,7 +551,7 @@ ${title} uncompressed size: ${formatBytesCompact(
                 {(myError || warnings > 0) && (
                   <div className="error-warning">
                     {myError && (
-                      <Tooltip2
+                      <Tooltip
                         content={
                           <div>
                             {(error.error.errorCode ? `${error.error.errorCode}: ` : '') +
@@ -567,11 +566,11 @@ ${title} uncompressed size: ${formatBytesCompact(
                           intent={Intent.DANGER}
                           onClick={onErrorClick}
                         />
-                      </Tooltip2>
+                      </Tooltip>
                     )}
                     {myError && warnings > 0 && ' '}
                     {warnings > 0 && (
-                      <Tooltip2
+                      <Tooltip
                         content={
                           <pre>{formatBreakdown(stages.getWarningBreakdownForStage(stage))}</pre>
                         }
@@ -584,7 +583,7 @@ ${title} uncompressed size: ${formatBytesCompact(
                           intent={Intent.WARNING}
                           onClick={onWarningClick}
                         />
-                      </Tooltip2>
+                      </Tooltip>
                     )}
                   </div>
                 )}
diff --git a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
index e64e05a703ba..a12ec0609f13 100644
--- a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
+++ b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Button, ButtonGroup, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { JSX } from 'react';
 import React, { useState } from 'react';
 
@@ -109,7 +108,7 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
           onClick={() => setShowDestinationPages(true)}
         />
       ) : (
-        <Popover2
+        <Popover
           key="download"
           className="download-button"
           content={
@@ -131,7 +130,7 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
           position={Position.BOTTOM_RIGHT}
         >
           <Button icon={IconNames.DOWNLOAD} minimal />
-        </Popover2>
+        </Popover>
       ),
     );
   }
diff --git a/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
index 7ba116e34b5d..f4be72759445 100644
--- a/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
+++ b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Intent } from '@blueprintjs/core';
+import { Intent, ResizeSensor } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { ResizeSensor2 } from '@blueprintjs/popover2';
 import { C, dedupe, T } from '@druid-toolkit/query';
 import type { Ace } from 'ace-builds';
 import ace from 'ace-builds';
@@ -294,7 +293,7 @@ export class FlexibleQueryInput extends React.PureComponent<
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
     return (
       <div className="flexible-query-input">
-        <ResizeSensor2 onResize={this.handleAceContainerResize}>
+        <ResizeSensor onResize={this.handleAceContainerResize}>
           <div
             className={classNames('ace-container', running ? 'query-running' : 'query-idle')}
             onClick={e => {
@@ -365,7 +364,7 @@ export class FlexibleQueryInput extends React.PureComponent<
           >
             {this.renderAce()}
           </div>
-        </ResizeSensor2>
+        </ResizeSensor>
       </div>
     );
   }
diff --git a/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
index 68b87d9f490d..de5f9658d2cf 100644
--- a/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`MaxTasksButton matches snapshot 1`] = `
 <React.Fragment>
-  <Popover2
+  <Blueprint5.Popover
+    boundary="clippingParents"
+    captureDismiss={false}
     className="max-tasks-button"
     content={
       <Blueprint5.Menu>
@@ -123,12 +125,28 @@ exports[`MaxTasksButton matches snapshot 1`] = `
         </Blueprint5.MenuItem>
       </Blueprint5.Menu>
     }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={false}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    matchTargetWidth={false}
+    minimal={false}
+    openOnTargetFocus={true}
     position="bottom-left"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
   >
     <Blueprint5.Button
       rightIcon="caret-down"
       text="Max tasks: 6 (full cluster capacity)"
     />
-  </Popover2>
+  </Blueprint5.Popover>
 </React.Fragment>
 `;
diff --git a/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx
index 9c53c375760a..c5e107c8a7ac 100644
--- a/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx
+++ b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx
@@ -17,9 +17,8 @@
  */
 
 import type { ButtonProps } from '@blueprintjs/core';
-import { Button, Menu, MenuDivider, MenuItem, Position } from '@blueprintjs/core';
+import { Button, Menu, MenuDivider, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { NumericInputDialog } from '../../../dialogs';
@@ -64,7 +63,7 @@ export const MaxTasksButton = function MaxTasksButton(props: MaxTasksButtonProps
 
   return (
     <>
-      <Popover2
+      <Popover
         className="max-tasks-button"
         position={Position.BOTTOM_LEFT}
         content={
@@ -124,7 +123,7 @@ export const MaxTasksButton = function MaxTasksButton(props: MaxTasksButtonProps
           }`}
           rightIcon={IconNames.CARET_DOWN}
         />
-      </Popover2>
+      </Popover>
       {customMaxNumTasksDialogOpen && (
         <NumericInputDialog
           title="Custom max task number"
diff --git a/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
index c0050b849e57..576751c66f1b 100644
--- a/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/query-parameters-dialog/__snapshots__/query-parameters-dialog.spec.tsx.snap
@@ -24,7 +24,9 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
       <Blueprint5.ControlGroup
         fill={true}
       >
-        <Popover2
+        <Blueprint5.Popover
+          boundary="clippingParents"
+          captureDismiss={false}
           content={
             <Blueprint5.Menu>
               <Blueprint5.MenuItem
@@ -79,14 +81,29 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
               />
             </Blueprint5.Menu>
           }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          matchTargetWidth={false}
           minimal={true}
+          openOnTargetFocus={true}
           position="bottom-left"
+          positioningStrategy="absolute"
+          shouldReturnFocusOnClose={false}
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
         >
           <Blueprint5.Button
             rightIcon="caret-down"
             text="VARCHAR"
           />
-        </Popover2>
+        </Blueprint5.Popover>
         <Blueprint5.InputGroup
           fill={true}
           onChange={[Function]}
@@ -105,7 +122,9 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
       <Blueprint5.ControlGroup
         fill={true}
       >
-        <Popover2
+        <Blueprint5.Popover
+          boundary="clippingParents"
+          captureDismiss={false}
           content={
             <Blueprint5.Menu>
               <Blueprint5.MenuItem
@@ -160,14 +179,29 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
               />
             </Blueprint5.Menu>
           }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          matchTargetWidth={false}
           minimal={true}
+          openOnTargetFocus={true}
           position="bottom-left"
+          positioningStrategy="absolute"
+          shouldReturnFocusOnClose={false}
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
         >
           <Blueprint5.Button
             rightIcon="caret-down"
             text="TIMESTAMP"
           />
-        </Popover2>
+        </Blueprint5.Popover>
         <Blueprint5.InputGroup
           fill={true}
           onChange={[Function]}
@@ -186,7 +220,9 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
       <Blueprint5.ControlGroup
         fill={true}
       >
-        <Popover2
+        <Blueprint5.Popover
+          boundary="clippingParents"
+          captureDismiss={false}
           content={
             <Blueprint5.Menu>
               <Blueprint5.MenuItem
@@ -241,14 +277,29 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
               />
             </Blueprint5.Menu>
           }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          matchTargetWidth={false}
           minimal={true}
+          openOnTargetFocus={true}
           position="bottom-left"
+          positioningStrategy="absolute"
+          shouldReturnFocusOnClose={false}
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
         >
           <Blueprint5.Button
             rightIcon="caret-down"
             text="BIGINT"
           />
-        </Popover2>
+        </Blueprint5.Popover>
         <Memo(FancyNumericInput)
           arbitraryPrecision={false}
           fill={true}
@@ -267,7 +318,9 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
       <Blueprint5.ControlGroup
         fill={true}
       >
-        <Popover2
+        <Blueprint5.Popover
+          boundary="clippingParents"
+          captureDismiss={false}
           content={
             <Blueprint5.Menu>
               <Blueprint5.MenuItem
@@ -322,14 +375,29 @@ exports[`QueryParametersDialog matches snapshot 1`] = `
               />
             </Blueprint5.Menu>
           }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          matchTargetWidth={false}
           minimal={true}
+          openOnTargetFocus={true}
           position="bottom-left"
+          positioningStrategy="absolute"
+          shouldReturnFocusOnClose={false}
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
         >
           <Blueprint5.Button
             rightIcon="caret-down"
             text="DOUBLE"
           />
-        </Popover2>
+        </Blueprint5.Popover>
         <Memo(FancyNumericInput)
           arbitraryPrecision={true}
           fill={true}
diff --git a/web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog.tsx b/web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog.tsx
index 6a6efda2f2cb..b9915bc7c0cf 100644
--- a/web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog.tsx
+++ b/web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog.tsx
@@ -27,10 +27,10 @@ import {
   Intent,
   Menu,
   MenuItem,
+  Popover,
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { QueryParameter } from '@druid-toolkit/query';
 import { isEmptyArray } from '@druid-toolkit/query';
 import React, { useState } from 'react';
@@ -83,7 +83,7 @@ export const QueryParametersDialog = React.memo(function QueryParametersDialog(
           return (
             <FormGroup key={i} label={`Parameter in position ${i + 1}`}>
               <ControlGroup fill>
-                <Popover2
+                <Popover
                   minimal
                   position={Position.BOTTOM_LEFT}
                   content={
@@ -104,7 +104,7 @@ export const QueryParametersDialog = React.memo(function QueryParametersDialog(
                   }
                 >
                   <Button text={type} rightIcon={IconNames.CARET_DOWN} />
-                </Popover2>
+                </Popover>
                 {oneOf(type, 'BIGINT', 'DOUBLE', 'FLOAT') ? (
                   <FancyNumericInput
                     value={Number(value)}
diff --git a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
index 73415efa3c7d..47ba4dd7705d 100644
--- a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
+++ b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Icon, Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { Button, Icon, Intent, Menu, MenuDivider, MenuItem, Popover } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import { T } from '@druid-toolkit/query';
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
@@ -227,7 +226,7 @@ LIMIT 100`,
 
             const [icon, color] = statusToIconAndColor(w.taskStatus);
             return (
-              <Popover2 className="work-entry" key={w.taskId} position="left" content={menu}>
+              <Popover className="work-entry" key={w.taskId} position="left" content={menu}>
                 <div title={formatDetail(w)} onDoubleClick={() => onExecutionDetails(w.taskId)}>
                   <div className="line1">
                     <Icon
@@ -260,7 +259,7 @@ LIMIT 100`,
                     </div>
                   </div>
                 </div>
-              </Popover2>
+              </Popover>
             );
           })}
         </div>
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
index 6f2bff79873f..2ac1da008a11 100644
--- a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Button, Icon, Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, Icon, Intent, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { Column, QueryResult, SqlExpression, SqlQuery } from '@druid-toolkit/query';
 import { C, F, SqlAlias, SqlFunction, SqlLiteral, SqlStar } from '@druid-toolkit/query';
 import classNames from 'classnames';
@@ -609,7 +608,7 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
             return {
               Header() {
                 return (
-                  <Popover2 content={<Deferred content={() => getHeaderMenu(column, i)} />}>
+                  <Popover content={<Deferred content={() => getHeaderMenu(column, i)} />}>
                     <div className="clickable-cell">
                       <div className="output-name" title={columnToSummary(column)}>
                         {icon && <Icon className="type-icon" icon={icon} size={12} />}
@@ -624,7 +623,7 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
                         </div>
                       )}
                     </div>
-                  </Popover2>
+                  </Popover>
                 );
               },
               headerClassName: getHeaderClassName(h),
@@ -633,7 +632,7 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
                 const value = row.value;
                 return (
                   <div>
-                    <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                    <Popover content={<Deferred content={() => getCellMenu(column, i, value)} />}>
                       {numericColumnBraces[i] ? (
                         <BracedText
                           className="table-padding"
@@ -644,7 +643,7 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
                       ) : (
                         <TableCell value={value} unlimited />
                       )}
-                    </Popover2>
+                    </Popover>
                   </div>
                 );
               },
diff --git a/web-console/src/views/workbench-view/run-panel/run-panel.tsx b/web-console/src/views/workbench-view/run-panel/run-panel.tsx
index 3c9b68ddb7c7..b58c05bea352 100644
--- a/web-console/src/views/workbench-view/run-panel/run-panel.tsx
+++ b/web-console/src/views/workbench-view/run-panel/run-panel.tsx
@@ -24,12 +24,12 @@ import {
   Menu,
   MenuDivider,
   MenuItem,
+  Popover,
   Position,
   Tag,
   useHotkeys,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { JSX } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 
@@ -255,7 +255,7 @@ export const RunPanel = React.memo(function RunPanel(props: RunPanelProps) {
       )}
       {!small && onQueryChange && (
         <ButtonGroup>
-          <Popover2
+          <Popover
             position={Position.BOTTOM_LEFT}
             content={
               <Menu>
@@ -489,7 +489,7 @@ export const RunPanel = React.memo(function RunPanel(props: RunPanelProps) {
               rightIcon={IconNames.CARET_DOWN}
               intent={intent}
             />
-          </Popover2>
+          </Popover>
           {effectiveEngine === 'sql-msq-task' && (
             <MaxTasksButton
               clusterCapacity={clusterCapacity}
@@ -498,7 +498,7 @@ export const RunPanel = React.memo(function RunPanel(props: RunPanelProps) {
             />
           )}
           {ingestMode && (
-            <Popover2
+            <Popover
               position={Position.BOTTOM_LEFT}
               content={
                 <Menu>
@@ -524,14 +524,14 @@ export const RunPanel = React.memo(function RunPanel(props: RunPanelProps) {
                 text={`Array ingest mode: ${arrayIngestMode ?? '(server default)'}`}
                 rightIcon={IconNames.CARET_DOWN}
               />
-            </Popover2>
+            </Popover>
           )}
         </ButtonGroup>
       )}
       {moreMenu && (
-        <Popover2 position={Position.BOTTOM_LEFT} content={moreMenu}>
+        <Popover position={Position.BOTTOM_LEFT} content={moreMenu}>
           <Button small={small} minimal={small} rightIcon={IconNames.MORE} />
-        </Popover2>
+        </Popover>
       )}
       {editContextDialogOpen && (
         <EditContextDialog
diff --git a/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
index 2d85a18322a5..ce7e1d482e9d 100644
--- a/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
+++ b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, Intent, Tab, Tabs } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Button, Classes, Dialog, Intent, Popover, Tab, Tabs } from '@blueprintjs/core';
 import * as JSONBig from 'json-bigint-native';
 import type { JSX } from 'react';
 import React, { useState } from 'react';
@@ -56,7 +55,7 @@ export const WorkbenchHistoryDialog = React.memo(function WorkbenchHistoryDialog
     return (
       <div className="query-entry">
         <div className="query-info-bar">
-          <Popover2
+          <Popover
             content={
               <pre className="json-popover-content">
                 {JSONBig.stringify(record.query.queryContext, undefined, 2)}
@@ -71,7 +70,7 @@ export const WorkbenchHistoryDialog = React.memo(function WorkbenchHistoryDialog
               minimal
               small
             />
-          </Popover2>
+          </Popover>
         </div>
         <AceEditor
           mode={jsonMode ? 'hjson' : 'dsql'}
diff --git a/web-console/src/views/workbench-view/workbench-view.tsx b/web-console/src/views/workbench-view/workbench-view.tsx
index 9fbba23ca1e1..6f93ff6c2a47 100644
--- a/web-console/src/views/workbench-view/workbench-view.tsx
+++ b/web-console/src/views/workbench-view/workbench-view.tsx
@@ -16,9 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import {
+  Button,
+  ButtonGroup,
+  Intent,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Popover,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import type { SqlQuery } from '@druid-toolkit/query';
 import { SqlExpression } from '@druid-toolkit/query';
 import classNames from 'classnames';
@@ -478,7 +485,7 @@ export class WorkbenchView extends React.PureComponent<WorkbenchViewProps, Workb
           return (
             <div key={i} className={classNames('tab-button', { active })}>
               {active ? (
-                <Popover2
+                <Popover
                   position="bottom"
                   content={
                     <Menu>
@@ -557,7 +564,7 @@ export class WorkbenchView extends React.PureComponent<WorkbenchViewProps, Workb
                     minimal
                     onDoubleClick={() => this.setState({ renamingTab: tabEntry })}
                   />
-                </Popover2>
+                </Popover>
               ) : (
                 <Button
                   className="tab-name"
diff --git a/web-console/webpack.config.js b/web-console/webpack.config.js
index 0e587ad31792..618a929aaea8 100644
--- a/web-console/webpack.config.js
+++ b/web-console/webpack.config.js
@@ -53,7 +53,7 @@ module.exports = env => {
     mode: mode,
     devtool: mode === 'production' ? undefined : 'eval-cheap-module-source-map',
     entry: {
-      'web-console': './src/entry.ts',
+      'web-console': './src/entry.tsx',
     },
     output: {
       path: path.resolve(__dirname, './public'),

From 173e31bbcd3e2800629c2e4b5f822e67f1f67500 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 08:44:05 -0700
Subject: [PATCH 05/15] update licenses

---
 licenses.yaml                    | 255 ++++---------------------------
 licenses/bin/react-innertext.MIT |  21 +++
 licenses/bin/react-uid.MIT       |  21 +++
 3 files changed, 70 insertions(+), 227 deletions(-)
 create mode 100644 licenses/bin/react-innertext.MIT
 create mode 100644 licenses/bin/react-uid.MIT

diff --git a/licenses.yaml b/licenses.yaml
index abfc8924898d..03565a146605 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5031,7 +5031,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 4.2.1
+version: 5.1.1
 
 ---
 
@@ -5040,7 +5040,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 4.20.2
+version: 5.10.5
 
 ---
 
@@ -5049,7 +5049,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 0.9.35
+version: 2.3.7
 
 ---
 
@@ -5058,7 +5058,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 4.4.36
+version: 5.3.7
 
 ---
 
@@ -5067,16 +5067,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 4.16.0
-
----
-
-name: "@blueprintjs/popover2"
-license_category: binary
-module: web-console
-license_name: Apache License version 2.0
-copyright: Palantir Technologies
-version: 1.14.11
+version: 5.10.0
 
 ---
 
@@ -5085,7 +5076,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 4.9.24
+version: 5.2.1
 
 ---
 
@@ -5206,16 +5197,6 @@ license_file_path: licenses/bin/@emotion-weak-memoize.MIT
 
 ---
 
-name: "@hypnosphi/create-react-context"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: James Kyle
-version: 0.3.1
-license_file_path: licenses/bin/@hypnosphi-create-react-context.MIT
-
----
-
 name: "@juggle/resize-observer"
 license_category: binary
 module: web-console
@@ -5235,16 +5216,6 @@ license_file_path: licenses/bin/@popperjs-core.MIT
 
 ---
 
-name: "@types/dom4"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Microsoft Corporation.
-version: 2.0.2
-license_file_path: licenses/bin/@types-dom4.MIT
-
----
-
 name: "@types/parse-json"
 license_category: binary
 module: web-console
@@ -5355,16 +5326,6 @@ license_file_path: licenses/bin/babel-plugin-syntax-jsx.MIT
 
 ---
 
-name: "call-bind"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.0.2
-license_file_path: licenses/bin/call-bind.MIT
-
----
-
 name: "callsites"
 license_category: binary
 module: web-console
@@ -5649,7 +5610,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Marnus Weststrate
-version: 1.3.8
+version: 2.0.1
 license_file_path: licenses/bin/date-fns-tz.MIT
 
 ---
@@ -5664,26 +5625,6 @@ license_file_path: licenses/bin/date-fns.MIT
 
 ---
 
-name: "deep-equal"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: James Halliday
-version: 1.1.1
-license_file_path: licenses/bin/deep-equal.MIT
-
----
-
-name: "define-properties"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.2.0
-license_file_path: licenses/bin/define-properties.MIT
-
----
-
 name: "delayed-stream"
 license_category: binary
 module: web-console
@@ -5723,16 +5664,6 @@ license_file_path: licenses/bin/dom-helpers.MIT
 
 ---
 
-name: "dom4"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Andrea Giammarchi
-version: 2.1.6
-license_file_path: licenses/bin/dom4.MIT
-
----
-
 name: "dot-case"
 license_category: binary
 module: web-console
@@ -5842,36 +5773,6 @@ license_file_path: licenses/bin/function-bind.MIT
 
 ---
 
-name: "functions-have-names"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.2.3
-license_file_path: licenses/bin/functions-have-names.MIT
-
----
-
-name: "get-intrinsic"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.2.0
-license_file_path: licenses/bin/get-intrinsic.MIT
-
----
-
-name: "gud"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jamie Kyle
-version: 1.0.0
-license_file_path: licenses/bin/gud.MIT
-
----
-
 name: "has-flag"
 license_category: binary
 module: web-console
@@ -5892,36 +5793,6 @@ license_file_path: licenses/bin/has-own-prop.MIT
 
 ---
 
-name: "has-property-descriptors"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.0.0
-license_file_path: licenses/bin/has-property-descriptors.MIT
-
----
-
-name: "has-symbols"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.0.3
-license_file_path: licenses/bin/has-symbols.MIT
-
----
-
-name: "has-tostringtag"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.0.0
-license_file_path: licenses/bin/has-tostringtag.MIT
-
----
-
 name: "has"
 license_category: binary
 module: web-console
@@ -6011,16 +5882,6 @@ license_file_path: licenses/bin/internmap.ISC
 
 ---
 
-name: "is-arguments"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.1.1
-license_file_path: licenses/bin/is-arguments.MIT
-
----
-
 name: "is-arrayish"
 license_category: binary
 module: web-console
@@ -6041,26 +5902,6 @@ license_file_path: licenses/bin/is-core-module.MIT
 
 ---
 
-name: "is-date-object"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.0.5
-license_file_path: licenses/bin/is-date-object.MIT
-
----
-
-name: "is-regex"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.1.4
-license_file_path: licenses/bin/is-regex.MIT
-
----
-
 name: "isarray"
 license_category: binary
 module: web-console
@@ -6151,16 +5992,6 @@ license_file_path: licenses/bin/lodash.isequal.MIT
 
 ---
 
-name: "lodash"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: John-David Dalton
-version: 4.17.21
-license_file_path: licenses/bin/lodash.MIT
-
----
-
 name: "loose-envify"
 license_category: binary
 module: web-console
@@ -6271,26 +6102,6 @@ license_file_path: licenses/bin/object-assign.MIT
 
 ---
 
-name: "object-is"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.1.5
-license_file_path: licenses/bin/object-is.MIT
-
----
-
-name: "object-keys"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.1.1
-license_file_path: licenses/bin/object-keys.MIT
-
----
-
 name: "opensans"
 license_category: binary
 module: web-console
@@ -6380,16 +6191,6 @@ license_file_path: licenses/bin/path-type.MIT
 
 ---
 
-name: "popper.js"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Federico Zivolo
-version: 1.16.1
-license_file_path: licenses/bin/popper.js.MIT
-
----
-
 name: "prop-types"
 license_category: binary
 module: web-console
@@ -6460,6 +6261,16 @@ license_file_path: licenses/bin/react-fast-compare.MIT
 
 ---
 
+name: "react-innertext"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Charles Stover
+version: 1.1.5
+license_file_path: licenses/bin/react-innertext.MIT
+
+---
+
 name: "react-is"
 license_category: binary
 module: web-console
@@ -6475,7 +6286,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Travis Arnold
-version: 1.3.11
+version: 2.3.0
 license_file_path: licenses/bin/react-popper.MIT
 
 ---
@@ -6530,6 +6341,16 @@ license_file_path: licenses/bin/react-transition-group.BSD3
 
 ---
 
+name: "react-uid"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Marina Korzunova
+version: 2.3.3
+license_file_path: licenses/bin/react-uid.MIT
+
+---
+
 name: "react"
 license_category: binary
 module: web-console
@@ -6550,16 +6371,6 @@ license_file_path: licenses/bin/regenerator-runtime.MIT
 
 ---
 
-name: "regexp.prototype.flags"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Jordan Harband
-version: 1.5.0
-license_file_path: licenses/bin/regexp.prototype.flags.MIT
-
----
-
 name: "resolve-from"
 license_category: binary
 module: web-console
@@ -6730,16 +6541,6 @@ license_file_path: licenses/bin/tslib.0BSD
 
 ---
 
-name: "typed-styles"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: lttb
-version: 0.0.7
-license_file_path: licenses/bin/typed-styles.MIT
-
----
-
 name: "upper-case-first"
 license_category: binary
 module: web-console
diff --git a/licenses/bin/react-innertext.MIT b/licenses/bin/react-innertext.MIT
new file mode 100644
index 000000000000..8109ef9ff8a2
--- /dev/null
+++ b/licenses/bin/react-innertext.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Charles Stover
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/licenses/bin/react-uid.MIT b/licenses/bin/react-uid.MIT
new file mode 100644
index 000000000000..6c48e928b3c1
--- /dev/null
+++ b/licenses/bin/react-uid.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Anton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

From bb8586ec498d32e7fef7d4208c1e8c243416f810 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 08:56:10 -0700
Subject: [PATCH 06/15] fix more depication warnings

---
 web-console/package-lock.json                    |  1 +
 web-console/package.json                         |  1 +
 .../components/interval-input/interval-input.tsx |  2 +-
 .../segment-timeline/segment-timeline.tsx        | 16 +++++++---------
 web-console/src/entry.scss                       |  1 +
 web-console/src/utils/date.ts                    |  2 +-
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 459d8385c366..3b7e8c4e9bba 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -10,6 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@blueprintjs/core": "^5.10.5",
+        "@blueprintjs/datetime": "^5.3.6",
         "@blueprintjs/datetime2": "^2.3.7",
         "@blueprintjs/icons": "^5.10.0",
         "@blueprintjs/select": "^5.2.1",
diff --git a/web-console/package.json b/web-console/package.json
index cccb5d775286..7d5a094405ad 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -64,6 +64,7 @@
   ],
   "dependencies": {
     "@blueprintjs/core": "^5.10.5",
+    "@blueprintjs/datetime": "^5.3.6",
     "@blueprintjs/datetime2": "^2.3.7",
     "@blueprintjs/icons": "^5.10.0",
     "@blueprintjs/select": "^5.2.1",
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index 043779eeb85f..76ed5f314082 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -18,7 +18,7 @@
 
 import type { Intent } from '@blueprintjs/core';
 import { Button, InputGroup, Popover, Position } from '@blueprintjs/core';
-import type { DateRange } from '@blueprintjs/datetime2';
+import type { DateRange } from '@blueprintjs/datetime';
 import { DateRangePicker3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index 2aa2e25126ef..a3b221136cff 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -17,11 +17,11 @@
  */
 
 import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
-import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime2';
+import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime';
 import { DateRangeInput3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
 import type { ItemPredicate, ItemRenderer } from '@blueprintjs/select';
-import { Select2 } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import type { AxisScale } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
 import React from 'react';
@@ -569,7 +569,7 @@ ORDER BY "start" DESC`;
       };
       const datasourcesWzAll = [showAll].concat(datasources);
       return (
-        <Select2<string>
+        <Select<string>
           items={datasourcesWzAll}
           onItemSelect={handleItemSelected}
           itemRenderer={datasourceRenderer}
@@ -582,7 +582,7 @@ ORDER BY "start" DESC`;
             fill
             rightIcon={IconNames.CARET_DOWN}
           />
-        </Select2>
+        </Select>
       );
     };
 
@@ -599,11 +599,6 @@ ORDER BY "start" DESC`;
               <Radio label="Segment count" value="countData" />
             </RadioGroup>
           </FormGroup>
-
-          <FormGroup label="Datasource">
-            <DatasourceSelect />
-          </FormGroup>
-
           <FormGroup label="Interval">
             <DateRangeInput3
               value={selectedDateRange || dateRange}
@@ -616,6 +611,9 @@ ORDER BY "start" DESC`;
               fill
             />
           </FormGroup>
+          <FormGroup label="Datasource">
+            <DatasourceSelect />
+          </FormGroup>
         </div>
       </div>
     );
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index a1e4586adc25..dd2b13e49782 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -20,6 +20,7 @@
 @import 'fontsource-open-sans/index.css';
 @import './blueprint-overrides';
 @import '@blueprintjs/core/src/blueprint';
+@import '@blueprintjs/datetime/src/blueprint-datetime';
 @import '@blueprintjs/datetime2/src/blueprint-datetime2';
 @import '@blueprintjs/select/src/blueprint-select';
 @import 'react-splitter-layout/lib/index';
diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts
index ecab2c39ca4f..ac26a201ca92 100644
--- a/web-console/src/utils/date.ts
+++ b/web-console/src/utils/date.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { DateRange } from '@blueprintjs/datetime2';
+import type { DateRange } from '@blueprintjs/datetime';
 
 const CURRENT_YEAR = new Date().getUTCFullYear();
 

From 8d68c6d090c1b46bd973054a2671c32eebfb8326 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 09:34:23 -0700
Subject: [PATCH 07/15] use segmented control

---
 .../src/blueprint-overrides/_index.scss       |  1 +
 .../_segmented-control.scss                   | 22 +++++++++++
 .../blueprint-overrides/common/_colors.scss   |  1 +
 .../src/components/auto-form/auto-form.tsx    | 39 +++++++------------
 .../segment-timeline/segment-timeline.scss    |  3 +-
 .../segment-timeline/segment-timeline.tsx     | 32 +++++++++------
 6 files changed, 60 insertions(+), 38 deletions(-)
 create mode 100644 web-console/src/blueprint-overrides/_segmented-control.scss

diff --git a/web-console/src/blueprint-overrides/_index.scss b/web-console/src/blueprint-overrides/_index.scss
index c345d815b80d..1f5c774dfced 100644
--- a/web-console/src/blueprint-overrides/_index.scss
+++ b/web-console/src/blueprint-overrides/_index.scss
@@ -25,3 +25,4 @@
 @import 'components/navbar/navbar';
 @import 'components/card/card';
 @import 'special-switch-modes';
+@import 'segmented-control';
diff --git a/web-console/src/blueprint-overrides/_segmented-control.scss b/web-console/src/blueprint-overrides/_segmented-control.scss
new file mode 100644
index 000000000000..8382d04a1986
--- /dev/null
+++ b/web-console/src/blueprint-overrides/_segmented-control.scss
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Adding div explicitly to make this selector slightly stronger
+.#{$ns}-dark div.#{$ns}-segmented-control {
+  background-color: $dark-gray3-half;
+}
diff --git a/web-console/src/blueprint-overrides/common/_colors.scss b/web-console/src/blueprint-overrides/common/_colors.scss
index ca10be55628d..a32862302175 100644
--- a/web-console/src/blueprint-overrides/common/_colors.scss
+++ b/web-console/src/blueprint-overrides/common/_colors.scss
@@ -23,6 +23,7 @@ $black: #0f1320; // Changed
 $dark-gray1: #181c2d; // Changed
 $dark-gray2: #24283b;
 $dark-gray3: #2f344e;
+$dark-gray3-half: #343953;
 $dark-gray4: #383d57;
 $dark-gray5: #414765;
 
diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
index 6583249c5a6a..91282d971b67 100644
--- a/web-console/src/components/auto-form/auto-form.tsx
+++ b/web-console/src/components/auto-form/auto-form.tsx
@@ -18,11 +18,11 @@
 
 import {
   Button,
-  ButtonGroup,
   FormGroup,
   InputGroup,
   Intent,
   NumericInput,
+  SegmentedControl,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import type { JSX } from 'react';
@@ -380,30 +380,19 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     const intent = required && modelValue == null ? AutoForm.REQUIRED_INTENT : undefined;
 
     return (
-      <ButtonGroup large={large}>
-        <Button
-          intent={intent}
-          disabled={disabled}
-          active={shownValue === false}
-          onClick={() => {
-            this.fieldChange(field, false);
-            if (onFinalize) onFinalize();
-          }}
-        >
-          False
-        </Button>
-        <Button
-          intent={intent}
-          disabled={disabled}
-          active={shownValue === true}
-          onClick={() => {
-            this.fieldChange(field, true);
-            if (onFinalize) onFinalize();
-          }}
-        >
-          True
-        </Button>
-      </ButtonGroup>
+      <SegmentedControl
+        value={String(shownValue)}
+        onValueChange={v => {
+          this.fieldChange(field, v === 'true');
+          if (onFinalize) onFinalize();
+        }}
+        options={[
+          { value: 'false', label: 'False', disabled },
+          { value: 'true', label: 'True', disabled },
+        ]}
+        intent={intent}
+        small={!large}
+      />
     );
   }
 
diff --git a/web-console/src/components/segment-timeline/segment-timeline.scss b/web-console/src/components/segment-timeline/segment-timeline.scss
index d77f37fba2ee..aa437052d617 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.scss
+++ b/web-console/src/components/segment-timeline/segment-timeline.scss
@@ -18,7 +18,7 @@
 
 .segment-timeline {
   display: grid;
-  grid-template-columns: 1fr 200px;
+  grid-template-columns: 1fr 220px;
 
   .loader {
     width: 85%;
@@ -28,7 +28,6 @@
     position: fixed;
     top: 50%;
     left: 50%;
-    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
 
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index a3b221136cff..fdf447a68e7b 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
+import { Button, FormGroup, MenuItem, ResizeSensor, SegmentedControl } from '@blueprintjs/core';
 import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime';
 import { DateRangeInput3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
@@ -478,7 +478,7 @@ ORDER BY "start" DESC`;
     if (data![activeDataType].length === 0) {
       return (
         <div>
-          <span className="no-data-text">No data available for the time span selected</span>
+          <span className="no-data-text">There are no segments for the selected interval</span>
         </div>
       );
     }
@@ -587,17 +587,27 @@ ORDER BY "start" DESC`;
     };
 
     return (
-      <div className="segment-timeline app-view">
+      <div className="segment-timeline">
         {this.renderStackedBarChart()}
         <div className="side-control">
-          <FormGroup>
-            <RadioGroup
-              onChange={(e: any) => this.setState({ activeDataType: e.target.value })}
-              selectedValue={activeDataType}
-            >
-              <Radio label="Total size" value="sizeData" />
-              <Radio label="Segment count" value="countData" />
-            </RadioGroup>
+          <FormGroup label="Show">
+            <SegmentedControl
+              value={activeDataType}
+              onValueChange={activeDataType =>
+                this.setState({ activeDataType: activeDataType as ActiveDataType })
+              }
+              options={[
+                {
+                  label: 'Total size',
+                  value: 'sizeData',
+                },
+                {
+                  label: 'Segment count',
+                  value: 'countData',
+                },
+              ]}
+              fill
+            />
           </FormGroup>
           <FormGroup label="Interval">
             <DateRangeInput3

From 957ec2d8062df5286e76231e48282e6d99e93e33 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 11:18:30 -0700
Subject: [PATCH 08/15] updat snapshots

---
 .../__snapshots__/auto-form.spec.tsx.snap     |  72 ++++++------
 .../segment-timeline.spec.tsx.snap            | 106 +++++++++---------
 .../src/components/show-log/show-log.tsx      |   4 +-
 3 files changed, 96 insertions(+), 86 deletions(-)

diff --git a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
index b6de25e09282..dc566363abee 100644
--- a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
+++ b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
@@ -77,42 +77,50 @@ exports[`AutoForm matches snapshot 1`] = `
   <Memo(FormGroupWithInfo)
     label="Test boolean"
   >
-    <Blueprint5.ButtonGroup>
-      <Blueprint5.Button
-        active={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        False
-      </Blueprint5.Button>
-      <Blueprint5.Button
-        active={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        True
-      </Blueprint5.Button>
-    </Blueprint5.ButtonGroup>
+    <Blueprint5.SegmentedControl
+      intent="none"
+      onValueChange={[Function]}
+      options={
+        [
+          {
+            "disabled": false,
+            "label": "False",
+            "value": "false",
+          },
+          {
+            "disabled": false,
+            "label": "True",
+            "value": "true",
+          },
+        ]
+      }
+      small={true}
+      value="undefined"
+    />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
     label="Test boolean with default"
   >
-    <Blueprint5.ButtonGroup>
-      <Blueprint5.Button
-        active={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        False
-      </Blueprint5.Button>
-      <Blueprint5.Button
-        active={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        True
-      </Blueprint5.Button>
-    </Blueprint5.ButtonGroup>
+    <Blueprint5.SegmentedControl
+      intent="none"
+      onValueChange={[Function]}
+      options={
+        [
+          {
+            "disabled": false,
+            "label": "False",
+            "value": "false",
+          },
+          {
+            "disabled": false,
+            "label": "True",
+            "value": "true",
+          },
+        ]
+      }
+      small={true}
+      value="false"
+    />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
     label="Test string array"
diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
index e1a7e8dd6a5f..d0b324b26163 100644
--- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SegmentTimeline matches snapshot 1`] = `
 <div
-  class="segment-timeline app-view"
+  class="segment-timeline"
 >
   <div>
     <div
@@ -42,52 +42,13 @@ exports[`SegmentTimeline matches snapshot 1`] = `
   <div
     class="side-control"
   >
-    <div
-      class="bp5-form-group"
-    >
-      <div
-        class="bp5-form-content"
-      >
-        <div
-          class="bp5-radio-group"
-        >
-          <label
-            class="bp5-control bp5-radio"
-          >
-            <input
-              checked=""
-              name="Blueprint5.RadioGroup-0"
-              type="radio"
-              value="sizeData"
-            />
-            <span
-              class="bp5-control-indicator"
-            />
-            Total size
-          </label>
-          <label
-            class="bp5-control bp5-radio"
-          >
-            <input
-              name="Blueprint5.RadioGroup-0"
-              type="radio"
-              value="countData"
-            />
-            <span
-              class="bp5-control-indicator"
-            />
-            Segment count
-          </label>
-        </div>
-      </div>
-    </div>
     <div
       class="bp5-form-group"
     >
       <label
         class="bp5-label"
       >
-        Datasource
+        Show
          
         <span
           class="bp5-text-muted"
@@ -97,26 +58,27 @@ exports[`SegmentTimeline matches snapshot 1`] = `
         class="bp5-form-content"
       >
         <div
-          aria-controls="listbox-1"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="bp5-popover-target bp5-fill"
-          role="combobox"
+          class="bp5-segmented-control bp5-fill"
         >
           <button
-            class="bp5-button bp5-fill"
+            class="bp5-button"
             type="button"
           >
             <span
               class="bp5-button-text"
             >
-              Show all
+              Total size
             </span>
+          </button>
+          <button
+            class="bp5-button bp5-minimal"
+            type="button"
+          >
             <span
-              aria-hidden="true"
-              class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-              data-icon="caret-down"
-            />
+              class="bp5-button-text"
+            >
+              Segment count
+            </span>
           </button>
         </div>
       </div>
@@ -168,6 +130,46 @@ exports[`SegmentTimeline matches snapshot 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="bp5-form-group"
+    >
+      <label
+        class="bp5-label"
+      >
+        Datasource
+         
+        <span
+          class="bp5-text-muted"
+        />
+      </label>
+      <div
+        class="bp5-form-content"
+      >
+        <div
+          aria-controls="listbox-1"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          class="bp5-popover-target bp5-fill"
+          role="combobox"
+        >
+          <button
+            class="bp5-button bp5-fill"
+            type="button"
+          >
+            <span
+              class="bp5-button-text"
+            >
+              Show all
+            </span>
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+              data-icon="caret-down"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/web-console/src/components/show-log/show-log.tsx b/web-console/src/components/show-log/show-log.tsx
index b072ac8e3039..7f4a0eaa3811 100644
--- a/web-console/src/components/show-log/show-log.tsx
+++ b/web-console/src/components/show-log/show-log.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { AnchorButton, Button, ButtonGroup, Intent, Switch } from '@blueprintjs/core';
+import { AnchorButton, Button, ButtonGroup, Classes, Intent, Switch } from '@blueprintjs/core';
 import copy from 'copy-to-clipboard';
 import * as JSONBig from 'json-bigint-native';
 import React from 'react';
@@ -184,7 +184,7 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
             <Loader />
           ) : (
             <textarea
-              className="bp4-input"
+              className={Classes.INPUT}
               readOnly
               value={logState.data || logState.getErrorMessage()}
               ref={this.log}

From 9a4a17055ae0d0621c25bc928c70a29eb0b485b5 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 13:36:35 -0700
Subject: [PATCH 09/15] convert to fake local time

---
 .../segment-timeline.spec.tsx.snap            |  4 +--
 .../segment-timeline/segment-timeline.tsx     | 28 +++++++++++--------
 web-console/src/utils/date.ts                 | 14 +++++++++-
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
index d0b324b26163..beac23c256c7 100644
--- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -112,7 +112,7 @@ exports[`SegmentTimeline matches snapshot 1`] = `
               class="bp5-input"
               placeholder="Start date"
               type="text"
-              value="2021-03-08"
+              value="2021-03-09"
             />
           </div>
           <div
@@ -124,7 +124,7 @@ exports[`SegmentTimeline matches snapshot 1`] = `
               class="bp5-input"
               placeholder="End date"
               type="text"
-              value="2021-06-08"
+              value="2021-06-09"
             />
           </div>
         </div>
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index fdf447a68e7b..86aae2b79e26 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -32,9 +32,12 @@ import {
   ceilToUtcDay,
   formatBytes,
   formatInteger,
+  isNonNullRange,
+  localToUtcDateRange,
   queryDruidSql,
   QueryManager,
   uniq,
+  utcToLocalDateRange,
 } from '../../utils';
 import { Loader } from '../loader/loader';
 
@@ -43,10 +46,6 @@ import { StackedBarChart } from './stacked-bar-chart';
 
 import './segment-timeline.scss';
 
-export function isNonNullRange(range: DateRange): range is NonNullDateRange {
-  return range[0] != null && range[1] != null;
-}
-
 interface SegmentTimelineProps {
   capabilities: Capabilities;
 }
@@ -86,6 +85,13 @@ interface IntervalRow {
 
 const DEFAULT_TIME_SPAN_MONTHS = 3;
 
+function getDefautlDateRange(): NonNullDateRange {
+  const start = ceilToUtcDay(new Date());
+  const end = new Date(start.valueOf());
+  start.setUTCMonth(start.getUTCMonth() - DEFAULT_TIME_SPAN_MONTHS);
+  return [start, end];
+}
+
 export class SegmentTimeline extends React.PureComponent<
   SegmentTimelineProps,
   SegmentTimelineState
@@ -243,10 +249,7 @@ ORDER BY "start" DESC`;
 
   constructor(props: SegmentTimelineProps) {
     super(props);
-    const start = ceilToUtcDay(new Date());
-    const end = new Date(start.valueOf());
-    start.setUTCMonth(start.getUTCMonth() - DEFAULT_TIME_SPAN_MONTHS);
-    const dateRange: NonNullDateRange = [start, end];
+    const dateRange = getDefautlDateRange();
 
     this.state = {
       chartWidth: 1, // Dummy init values to be replaced
@@ -611,11 +614,12 @@ ORDER BY "start" DESC`;
           </FormGroup>
           <FormGroup label="Interval">
             <DateRangeInput3
-              value={selectedDateRange || dateRange}
+              value={utcToLocalDateRange(selectedDateRange || dateRange)}
               onChange={newDateRange => {
-                if (!isNonNullRange(newDateRange)) return;
-                this.setState({ dateRange: newDateRange, selectedDateRange: undefined }, () => {
-                  this.dataQueryManager.runQuery({ capabilities, dateRange: newDateRange });
+                const newUtcDateRange = localToUtcDateRange(newDateRange);
+                if (!isNonNullRange(newUtcDateRange)) return;
+                this.setState({ dateRange: newUtcDateRange, selectedDateRange: undefined }, () => {
+                  this.dataQueryManager.runQuery({ capabilities, dateRange: newUtcDateRange });
                 });
               }}
               fill
diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts
index ac26a201ca92..b6ace7d6dda3 100644
--- a/web-console/src/utils/date.ts
+++ b/web-console/src/utils/date.ts
@@ -16,10 +16,14 @@
  * limitations under the License.
  */
 
-import type { DateRange } from '@blueprintjs/datetime';
+import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime';
 
 const CURRENT_YEAR = new Date().getUTCFullYear();
 
+export function isNonNullRange(range: DateRange): range is NonNullDateRange {
+  return range[0] != null && range[1] != null;
+}
+
 export function dateToIsoDateString(date: Date): string {
   return date.toISOString().slice(0, 10);
 }
@@ -38,6 +42,14 @@ export function localToUtcDate(localDate: Date): Date {
   return new Date(localDate.getTime() - localDate.getTimezoneOffset() * 60000);
 }
 
+export function utcToLocalDateRange([start, end]: DateRange): DateRange {
+  return [start ? utcToLocalDate(start) : null, end ? utcToLocalDate(end) : null];
+}
+
+export function localToUtcDateRange([start, end]: DateRange): DateRange {
+  return [start ? localToUtcDate(start) : null, end ? localToUtcDate(end) : null];
+}
+
 export function intervalToLocalDateRange(interval: string): DateRange {
   const dates = interval.split('/');
   if (dates.length !== 2) return [null, null];

From e49e5917aeb7b6abfea529897c787b3a378ec46e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 14:05:44 -0700
Subject: [PATCH 10/15] preload icons before tests

---
 .../__snapshots__/action-cell.spec.tsx.snap   |  18 ++-
 .../__snapshots__/action-icon.spec.tsx.snap   |  18 ++-
 .../__snapshots__/array-input.spec.tsx.snap   |  18 ++-
 .../array-mode-swtich.spec.tsx.snap           |  16 +-
 .../clearable-input.spec.tsx.snap             |  18 ++-
 .../form-group-with-info.spec.tsx.snap        |  16 +-
 .../interval-input.spec.tsx.snap              |  18 ++-
 .../__snapshots__/menu-checkbox.spec.tsx.snap |  36 ++++-
 .../__snapshots__/more-button.spec.tsx.snap   |  18 ++-
 .../__snapshots__/rule-editor.spec.tsx.snap   |  72 +++++++--
 .../segment-timeline.spec.tsx.snap            |  18 ++-
 .../suggestible-input.spec.tsx.snap           |  18 ++-
 .../__snapshots__/table-cell.spec.tsx.snap    |  18 ++-
 .../table-column-selector.spec.tsx.snap       |  18 ++-
 .../__snapshots__/about-dialog.spec.tsx.snap  |  18 ++-
 ...tasource-table-action-dialog.spec.tsx.snap |  72 +++++++--
 .../__snapshots__/doctor-dialog.spec.tsx.snap |  18 ++-
 .../history-dialog.spec.tsx.snap              |  18 ++-
 .../lookup-table-action-dialog.spec.tsx.snap  |  54 +++++--
 .../retention-dialog.spec.tsx.snap            | 144 +++++++++++++++---
 .../segment-table-action-dialog.spec.tsx.snap |  72 +++++++--
 .../show-value-dialog.spec.tsx.snap           |  18 ++-
 .../__snapshots__/snitch-dialog.spec.tsx.snap |  18 ++-
 ...pervisor-table-action-dialog.spec.tsx.snap | 108 ++++++++++---
 .../table-action-dialog.spec.tsx.snap         |  18 ++-
 .../task-table-action-dialog.spec.tsx.snap    | 108 ++++++++++---
 web-console/src/setup-tests.ts                |   6 +
 .../datasources-card.spec.tsx.snap            |  19 ++-
 .../home-view-card.spec.tsx.snap              |  19 ++-
 .../__snapshots__/lookups-card.spec.tsx.snap  |  19 ++-
 .../__snapshots__/segments-card.spec.tsx.snap |  19 ++-
 .../__snapshots__/services-card.spec.tsx.snap |  19 ++-
 .../__snapshots__/status-card.spec.tsx.snap   |  19 ++-
 .../supervisors-card.spec.tsx.snap            |  19 ++-
 .../__snapshots__/tasks-card.spec.tsx.snap    |  19 ++-
 .../__snapshots__/form-editor.spec.tsx.snap   |  34 ++++-
 .../complex-menu-items.spec.tsx.snap          |  18 ++-
 .../number-menu-items.spec.tsx.snap           |  72 +++++++--
 .../string-menu-items.spec.tsx.snap           |  72 +++++++--
 .../time-menu-items.spec.tsx.snap             |  72 +++++++--
 .../execution-timer-panel.spec.tsx.snap       |  36 ++++-
 41 files changed, 1211 insertions(+), 237 deletions(-)

diff --git a/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap b/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
index 9660d9aee97b..4af64af7f53f 100644
--- a/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
+++ b/web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap
@@ -6,8 +6,20 @@ exports[`ActionCell matches snapshot 1`] = `
 >
   <span
     aria-hidden="true"
-    class="bp5-icon bp5-icon-standard bp5-icon-search-template action-icon"
-    data-icon="search-template"
-  />
+    class="bp5-icon bp5-icon-search-template action-icon"
+  >
+    <svg
+      data-icon="search-template"
+      height="16"
+      role="img"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M15.55 13.43l-2.67-2.67c.7-1.09 1.11-2.38 1.11-3.77 0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.41 3.77-1.11l2.67 2.67a1.498 1.498 0 102.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm2.5-6h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm0-2h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm0 4h-5c-.28 0-.5.22-.5.5s.22.5.5.5h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </span>
 </div>
 `;
diff --git a/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap b/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
index d702eaf657d0..14600f57d42e 100644
--- a/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
+++ b/web-console/src/components/action-icon/__snapshots__/action-icon.spec.tsx.snap
@@ -3,7 +3,19 @@
 exports[`ActionIcon matches snapshot 1`] = `
 <span
   aria-hidden="true"
-  class="bp5-icon bp5-icon-standard bp5-icon-clipboard action-icon"
-  data-icon="clipboard"
-/>
+  class="bp5-icon bp5-icon-clipboard action-icon"
+>
+  <svg
+    data-icon="clipboard"
+    height="16"
+    role="img"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path
+      d="M11 2c0-.55-.45-1-1-1h.22C9.88.4 9.24 0 8.5 0S7.12.4 6.78 1H7c-.55 0-1 .45-1 1v1h5V2zm2 0h-1v2H5V2H4c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h9c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z"
+      fill-rule="evenodd"
+    />
+  </svg>
+</span>
 `;
diff --git a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
index ed2f8268dcf1..b476b48bcb12 100644
--- a/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
+++ b/web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap
@@ -21,9 +21,21 @@ exports[`ArrayInput matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-plus"
-        data-icon="plus"
-      />
+        class="bp5-icon bp5-icon-plus"
+      >
+        <svg
+          data-icon="plus"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </button>
   </span>
 </div>
diff --git a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
index e2d1457ccbc2..278de27a3594 100644
--- a/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
+++ b/web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap
@@ -27,8 +27,20 @@ exports[`ArrayModeSwitch matches snapshot 1`] = `
         aria-haspopup="menu"
         aria-hidden="true"
         class="bp5-icon bp5-icon-info-sign"
-        data-icon="info-sign"
-      />
+      >
+        <svg
+          data-icon="info-sign"
+          height="14"
+          role="img"
+          viewBox="0 0 16 16"
+          width="14"
+        >
+          <path
+            d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </span>
   </div>
 </div>
diff --git a/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap b/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
index 6b438f1d9e07..b613b2fb416d 100644
--- a/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
+++ b/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
@@ -20,9 +20,21 @@ exports[`ClearableInput matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-cross"
-        data-icon="cross"
-      />
+        class="bp5-icon bp5-icon-cross"
+      >
+        <svg
+          data-icon="cross"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </button>
   </span>
 </div>
diff --git a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
index 064c72482677..636537e026dd 100644
--- a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
+++ b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -20,8 +20,20 @@ exports[`FormGroupWithInfo matches snapshot 1`] = `
           aria-haspopup="menu"
           aria-hidden="true"
           class="bp5-icon bp5-icon-info-sign"
-          data-icon="info-sign"
-        />
+        >
+          <svg
+            data-icon="info-sign"
+            height="14"
+            role="img"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
       </span>
     </span>
   </label>
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index f334d04e39c4..82929c917294 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -26,9 +26,21 @@ exports[`IntervalInput matches snapshot 1`] = `
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-calendar"
-            data-icon="calendar"
-          />
+            class="bp5-icon bp5-icon-calendar"
+          >
+            <svg
+              data-icon="calendar"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </button>
       </span>
     </div>
diff --git a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
index 7ed6b8c73114..152cc17f1afb 100644
--- a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
+++ b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
@@ -15,10 +15,22 @@ exports[`MenuCheckbox matches snapshot checked 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-tick-circle"
-        data-icon="tick-circle"
+        class="bp5-icon bp5-icon-tick-circle"
         tabindex="-1"
-      />
+      >
+        <svg
+          data-icon="tick-circle"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 16c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4-11c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="bp5-text-overflow-ellipsis bp5-fill"
@@ -44,10 +56,22 @@ exports[`MenuCheckbox matches snapshot unchecked 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-circle"
-        data-icon="circle"
+        class="bp5-icon bp5-icon-circle"
         tabindex="-1"
-      />
+      >
+        <svg
+          data-icon="circle"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="bp5-text-overflow-ellipsis bp5-fill"
diff --git a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
index 1d6fac4e37b2..ecc0eb477da4 100644
--- a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
+++ b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
@@ -47,9 +47,21 @@ exports[`MoreButton matches snapshot (full) 1`] = `
   >
     <span
       aria-hidden="true"
-      class="bp5-icon bp5-icon-standard bp5-icon-more"
-      data-icon="more"
-    />
+      class="bp5-icon bp5-icon-more"
+    >
+      <svg
+        data-icon="more"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
   </button>
 </span>
 `;
diff --git a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
index 507f156e3270..c3c437996674 100644
--- a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
+++ b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
@@ -18,9 +18,21 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-        data-icon="caret-down"
-      />
+        class="bp5-icon bp5-icon-caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </button>
     <div
       class="spacer"
@@ -31,9 +43,21 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-trash"
-        data-icon="trash"
-      />
+        class="bp5-icon bp5-icon-trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </button>
   </div>
   <div
@@ -297,9 +321,21 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-trash"
-                  data-icon="trash"
-                />
+                  class="bp5-icon bp5-icon-trash"
+                >
+                  <svg
+                    data-icon="trash"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>
@@ -317,9 +353,21 @@ exports[`RuleEditor matches snapshot no tier in rule 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-plus"
-                data-icon="plus"
-              />
+                class="bp5-icon bp5-icon-plus"
+              >
+                <svg
+                  data-icon="plus"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
index beac23c256c7..1d88f973f712 100644
--- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
+++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap
@@ -163,9 +163,21 @@ exports[`SegmentTimeline matches snapshot 1`] = `
             </span>
             <span
               aria-hidden="true"
-              class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-              data-icon="caret-down"
-            />
+              class="bp5-icon bp5-icon-caret-down"
+            >
+              <svg
+                data-icon="caret-down"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
           </button>
         </div>
       </div>
diff --git a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
index 98c91a13127e..5fb02a82372e 100644
--- a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
+++ b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
@@ -27,9 +27,21 @@ exports[`SuggestibleInput matches snapshot 1`] = `
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-            data-icon="caret-down"
-          />
+            class="bp5-icon bp5-icon-caret-down"
+          >
+            <svg
+              data-icon="caret-down"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </button>
       </span>
     </span>
diff --git a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
index 10b8397ce6fc..29b4091d7ba0 100644
--- a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
+++ b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
@@ -31,9 +31,21 @@ exports[`TableCell matches snapshot array long 1`] = `
   7, 98, 99]
   <span
     aria-hidden="true"
-    class="bp5-icon bp5-icon-standard bp5-icon-more action-icon"
-    data-icon="more"
-  />
+    class="bp5-icon bp5-icon-more action-icon"
+  >
+    <svg
+      data-icon="more"
+      height="16"
+      role="img"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </span>
 </div>
 `;
 
diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index 038620ac06e6..2cf9fb0e724e 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -22,9 +22,21 @@ exports[`TableColumnSelector matches snapshot 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-      data-icon="caret-down"
-    />
+      class="bp5-icon bp5-icon-caret-down"
+    >
+      <svg
+        data-icon="caret-down"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
   </button>
 </span>
 `;
diff --git a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
index cca046b1c2f3..7525880e6e28 100644
--- a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
@@ -30,10 +30,22 @@ exports[`AboutDialog matches snapshot 1`] = `
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-graph"
-            data-icon="graph"
+            class="bp5-icon bp5-icon-graph"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="graph"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M14 3c-1.06 0-1.92.83-1.99 1.88l-1.93.97A2.95 2.95 0 008 5c-.56 0-1.08.16-1.52.43L3.97 3.34C3.98 3.23 4 3.12 4 3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.24 0 .47-.05.68-.13l2.51 2.09C5.08 7.29 5 7.63 5 8c0 .96.46 1.81 1.16 2.35l-.56 1.69c-.91.19-1.6.99-1.6 1.96 0 1.1.9 2 2 2s2-.9 2-2c0-.51-.2-.97-.51-1.32l.56-1.69A2.99 2.99 0 0011 8c0-.12-.02-.24-.04-.36l1.94-.97c.32.21.69.33 1.1.33 1.1 0 2-.9 2-2s-.9-2-2-2z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
           <h6
             class="bp5-heading"
             id="title-bp-dialog-0"
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
index b90121890d05..6a537f5458f0 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-th"
-                data-icon="th"
-              />
+                class="bp5-icon bp5-icon-th"
+              >
+                <svg
+                  data-icon="th"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -87,9 +99,21 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-list-columns"
-                data-icon="list-columns"
-              />
+                class="bp5-icon bp5-icon-list-columns"
+              >
+                <svg
+                  data-icon="list-columns"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M0 2.973v-.936C0 1.468.46 1.01 1.029 1H7.97C8.541 1 9 1.468 9 2.027v.946C9 3.542 8.53 4 7.971 4H1.03C.459 4 0 3.542 0 2.973zm0 5v-.936C0 6.468.46 6.01 1.029 6H7.97C8.541 6 9 6.468 9 7.027v.946C9 8.542 8.53 9 7.971 9H1.03C.459 9 0 8.542 0 7.973zm0 5v-.936C0 11.468.46 11.01 1.029 11H7.97C8.541 11 9 11.468 9 12.027v.946C9 13.542 8.53 14 7.971 14H1.03C.459 14 0 13.542 0 12.973zm0 5v-.936C0 16.468.46 16.01 1.029 16H7.97C8.541 16 9 16.468 9 17.027v.946C9 18.542 8.53 19 7.971 19H1.03C.459 19 0 18.542 0 17.973zm11-15v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 1 20 1.468 20 2.027v.946C20 3.542 19.53 4 18.971 4H12.03C11.459 4 11 3.542 11 2.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 6 20 6.468 20 7.027v.946C20 8.542 19.53 9 18.971 9H12.03C11.459 9 11 8.542 11 7.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -156,9 +180,21 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
-                  data-icon="wrench"
-                />
+                  class="bp5-icon bp5-icon-wrench"
+                >
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
                 <span
                   class="bp5-button-text"
                 >
@@ -166,9 +202,21 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                  data-icon="caret-down"
-                />
+                  class="bp5-icon bp5-icon-caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </span>
           </div>
diff --git a/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap b/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
index b277e7dc1545..f90dd8cbaab0 100644
--- a/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/doctor-dialog/__snapshots__/doctor-dialog.spec.tsx.snap
@@ -30,10 +30,22 @@ exports[`DoctorDialog matches snapshot 1`] = `
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-pulse"
-            data-icon="pulse"
+            class="bp5-icon bp5-icon-pulse"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="pulse"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M15 8h-1.46l-1.7-2.55-.02.01A.984.984 0 0011 5c-.43 0-.79.27-.93.65h-.01l-1.69 4.51-1.38-8.32h-.02A.989.989 0 006 1c-.41 0-.77.25-.92.61L2.34 8H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.41 0 .77-.25.92-.61l1.65-3.86 1.44 8.63h.02c.08.47.47.84.97.84.43 0 .79-.27.93-.65h.01l2.31-6.17.92 1.38.02-.01c.17.26.46.45.81.45h2c.55 0 1-.45 1-1s-.45-1-1-1z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
           <h6
             class="bp5-heading"
             id="title-bp-dialog-0"
diff --git a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
index 282ef28f71a3..50535a3a5d4c 100644
--- a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
@@ -164,9 +164,21 @@ exports[`HistoryDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-arrow-left"
-                data-icon="arrow-left"
-              />
+                class="bp5-icon bp5-icon-arrow-left"
+              >
+                <svg
+                  data-icon="arrow-left"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M13.99 6.99H4.41L7.7 3.7a1.003 1.003 0 00-1.42-1.42l-5 5a1.014 1.014 0 000 1.42l5 5a1.003 1.003 0 001.42-1.42L4.41 8.99H14c.55 0 1-.45 1-1s-.46-1-1.01-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
diff --git a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
index 118cc72c3b2b..42becdfd9456 100644
--- a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-list-columns"
-                data-icon="list-columns"
-              />
+                class="bp5-icon bp5-icon-list-columns"
+              >
+                <svg
+                  data-icon="list-columns"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M0 2.973v-.936C0 1.468.46 1.01 1.029 1H7.97C8.541 1 9 1.468 9 2.027v.946C9 3.542 8.53 4 7.971 4H1.03C.459 4 0 3.542 0 2.973zm0 5v-.936C0 6.468.46 6.01 1.029 6H7.97C8.541 6 9 6.468 9 7.027v.946C9 8.542 8.53 9 7.971 9H1.03C.459 9 0 8.542 0 7.973zm0 5v-.936C0 11.468.46 11.01 1.029 11H7.97C8.541 11 9 11.468 9 12.027v.946C9 13.542 8.53 14 7.971 14H1.03C.459 14 0 13.542 0 12.973zm0 5v-.936C0 16.468.46 16.01 1.029 16H7.97C8.541 16 9 16.468 9 17.027v.946C9 18.542 8.53 19 7.971 19H1.03C.459 19 0 18.542 0 17.973zm11-15v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 1 20 1.468 20 2.027v.946C20 3.542 19.53 4 18.971 4H12.03C11.459 4 11 3.542 11 2.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 6 20 6.468 20 7.027v.946C20 8.542 19.53 9 18.971 9H12.03C11.459 9 11 8.542 11 7.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -145,9 +157,21 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
-                  data-icon="wrench"
-                />
+                  class="bp5-icon bp5-icon-wrench"
+                >
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
                 <span
                   class="bp5-button-text"
                 >
@@ -155,9 +179,21 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                  data-icon="caret-down"
-                />
+                  class="bp5-icon bp5-icon-caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </span>
           </div>
diff --git a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index 20b4d1deb106..c193ae7a1171 100644
--- a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -136,9 +136,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                         </span>
                         <span
                           aria-hidden="true"
-                          class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                          data-icon="caret-down"
-                        />
+                          class="bp5-icon bp5-icon-caret-down"
+                        >
+                          <svg
+                            data-icon="caret-down"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
                       </button>
                       <div
                         class="spacer"
@@ -149,9 +161,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                       >
                         <span
                           aria-hidden="true"
-                          class="bp5-icon bp5-icon-standard bp5-icon-trash"
-                          data-icon="trash"
-                        />
+                          class="bp5-icon bp5-icon-trash"
+                        >
+                          <svg
+                            data-icon="trash"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
                       </button>
                     </div>
                     <div
@@ -281,9 +305,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                         >
                                           <span
                                             aria-hidden="true"
-                                            class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                                            data-icon="caret-down"
-                                          />
+                                            class="bp5-icon bp5-icon-caret-down"
+                                          >
+                                            <svg
+                                              data-icon="caret-down"
+                                              height="16"
+                                              role="img"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <path
+                                                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
                                         </button>
                                       </span>
                                     </span>
@@ -453,9 +489,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                 >
                                   <span
                                     aria-hidden="true"
-                                    class="bp5-icon bp5-icon-standard bp5-icon-trash"
-                                    data-icon="trash"
-                                  />
+                                    class="bp5-icon bp5-icon-trash"
+                                  >
+                                    <svg
+                                      data-icon="trash"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                    >
+                                      <path
+                                        d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+                                        fill-rule="evenodd"
+                                      />
+                                    </svg>
+                                  </span>
                                 </button>
                               </div>
                             </div>
@@ -475,9 +523,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="bp5-icon bp5-icon-standard bp5-icon-plus"
-                                  data-icon="plus"
-                                />
+                                  class="bp5-icon bp5-icon-plus"
+                                >
+                                  <svg
+                                    data-icon="plus"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                  >
+                                    <path
+                                      d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
                                 <span
                                   class="bp5-button-text"
                                 >
@@ -497,9 +557,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                     >
                       <span
                         aria-hidden="true"
-                        class="bp5-icon bp5-icon-standard bp5-icon-plus"
-                        data-icon="plus"
-                      />
+                        class="bp5-icon bp5-icon-plus"
+                      >
+                        <svg
+                          data-icon="plus"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
                       <span
                         class="bp5-button-text"
                       >
@@ -551,9 +623,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
                         </span>
                         <span
                           aria-hidden="true"
-                          class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                          data-icon="caret-down"
-                        />
+                          class="bp5-icon bp5-icon-caret-down"
+                        >
+                          <svg
+                            data-icon="caret-down"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
                       </button>
                       <div
                         class="spacer"
@@ -866,9 +950,21 @@ exports[`RetentionDialog matches snapshot 1`] = `
               </span>
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-arrow-right"
-                data-icon="arrow-right"
-              />
+                class="bp5-icon bp5-icon-arrow-right"
+              >
+                <svg
+                  data-icon="arrow-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M14.7 7.29l-5-5a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 001.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
             </button>
           </div>
         </div>
diff --git a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
index 1f2664179047..b5e9297210f8 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-manually-entered-data"
-                data-icon="manually-entered-data"
-              />
+                class="bp5-icon bp5-icon-manually-entered-data"
+              >
+                <svg
+                  data-icon="manually-entered-data"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M1 12h4.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zm16.77-3.94l1.65-1.65c.36-.36.58-.86.58-1.41 0-1.1-.9-2-2-2-.55 0-1.05.22-1.41.59l-1.65 1.65 2.83 2.82zM1 4h12.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zM0 15c0 .55.45 1 1 1h.34l2-2H1c-.55 0-1 .45-1 1zm1-7h8.34l2-2H1c-.55 0-1 .45-1 1s.45 1 1 1zm18 2h-.34l-2 2H19c.55 0 1-.45 1-1s-.45-1-1-1zm0 4h-4.34l-2 2H19c.55 0 1-.45 1-1s-.45-1-1-1zM4 19l4.41-1.59-2.81-2.79L4 19zM14.23 5.94l-7.65 7.65 2.83 2.83 7.65-7.65-2.83-2.83z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -87,9 +99,21 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-th"
-                data-icon="th"
-              />
+                class="bp5-icon bp5-icon-th"
+              >
+                <svg
+                  data-icon="th"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -204,9 +228,21 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
-                  data-icon="wrench"
-                />
+                  class="bp5-icon bp5-icon-wrench"
+                >
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
                 <span
                   class="bp5-button-text"
                 >
@@ -214,9 +250,21 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                  data-icon="caret-down"
-                />
+                  class="bp5-icon bp5-icon-caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </span>
           </div>
diff --git a/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
index cb35a8931748..bfa86ae9b034 100644
--- a/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap
@@ -82,9 +82,21 @@ exports[`ShowValueDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-duplicate"
-                data-icon="duplicate"
-              />
+                class="bp5-icon bp5-icon-duplicate"
+              >
+                <svg
+                  data-icon="duplicate"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
diff --git a/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap b/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
index 0ab72c0e9ef6..4643c6e20d96 100644
--- a/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/snitch-dialog/__snapshots__/snitch-dialog.spec.tsx.snap
@@ -80,9 +80,21 @@ exports[`SnitchDialog matches snapshot 1`] = `
               </span>
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-arrow-right"
-                data-icon="arrow-right"
-              />
+                class="bp5-icon bp5-icon-arrow-right"
+              >
+                <svg
+                  data-icon="arrow-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M14.7 7.29l-5-5a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 001.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
             </button>
           </div>
         </div>
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
index 2e7d619d7de8..84e7b4d3a5ac 100755
--- a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-dashboard"
-                data-icon="dashboard"
-              />
+                class="bp5-icon bp5-icon-dashboard"
+              >
+                <svg
+                  data-icon="dashboard"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM4 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6-4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-5C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-8 5c0 1.1.9 2 2 2s2-.9 2-2c0-.33-2-8-2-8s-2 7.67-2 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -87,9 +99,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-chart"
-                data-icon="chart"
-              />
+                class="bp5-icon bp5-icon-chart"
+              >
+                <svg
+                  data-icon="chart"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M7 11v8c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-8l-2 2-4-2zm-7 8c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-8l-6 3v5zM17 7l-3 3v9c0 .55.45 1 1 1h4c.55 0 1-.45 1-1V8.74c-.26.15-.58.26-1 .26-1.92 0-2-2-2-2zm2-6h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L10.8 8.78 7.45 7.11v.01C7.31 7.05 7.16 7 7 7s-.31.05-.44.11V7.1l-6 3v.01c-.33.17-.56.5-.56.89 0 .55.45 1 1 1 .16 0 .31-.05.44-.11v.01L7 9.12l3.55 1.78v-.01c.14.06.29.11.45.11.28 0 .53-.11.71-.29L18 4.41V6c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -102,9 +126,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-align-left"
-                data-icon="align-left"
-              />
+                class="bp5-icon bp5-icon-align-left"
+              >
+                <svg
+                  data-icon="align-left"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -117,9 +153,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-history"
-                data-icon="history"
-              />
+                class="bp5-icon bp5-icon-history"
+              >
+                <svg
+                  data-icon="history"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M10 0C6.71 0 3.82 1.6 2 4.05V2c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.76C5.23 3.17 7.47 2 10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8c0-.55-.45-1-1-1s-1 .45-1 1c0 5.52 4.48 10 10 10s10-4.48 10-10S15.52 0 10 0zm0 3c-.55 0-1 .45-1 1v6c0 .28.11.53.29.71l3 3a1.003 1.003 0 001.42-1.42L11 9.59V4c0-.55-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -234,9 +282,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
-                  data-icon="wrench"
-                />
+                  class="bp5-icon bp5-icon-wrench"
+                >
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
                 <span
                   class="bp5-button-text"
                 >
@@ -244,9 +304,21 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                  data-icon="caret-down"
-                />
+                  class="bp5-icon bp5-icon-caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </span>
           </div>
diff --git a/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
index 9f8921edf9e1..ca0554e467b7 100644
--- a/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/table-action-dialog/__snapshots__/table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`TableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-badge"
-                data-icon="badge"
-              />
+                class="bp5-icon bp5-icon-badge"
+              >
+                <svg
+                  data-icon="badge"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M16.94 5.73c-.19-1.41.62-2.52 1.38-3.59L17.03.65C14.89 1.76 11.88 1.48 10 0 8.12 1.48 5.11 1.76 2.97.65L1.68 2.14c.76 1.07 1.57 2.18 1.38 3.59C2.68 8.59 0 10.94 1.4 14.08c.56 1.43 1.81 2.37 3.4 2.75 1.95.46 4.4.91 5.2 3.17.8-2.26 3.25-2.71 5.2-3.17 1.6-.38 2.84-1.32 3.4-2.75 1.4-3.14-1.28-5.49-1.66-8.35z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
diff --git a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
index 572ae069eacc..28fa10bb1455 100644
--- a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
@@ -72,9 +72,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-dashboard"
-                data-icon="dashboard"
-              />
+                class="bp5-icon bp5-icon-dashboard"
+              >
+                <svg
+                  data-icon="dashboard"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM4 9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6-4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-5C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-8 5c0 1.1.9 2 2 2s2-.9 2-2c0-.33-2-8-2-8s-2 7.67-2 8zm6-9c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -87,9 +99,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-comparison"
-                data-icon="comparison"
-              />
+                class="bp5-icon bp5-icon-comparison"
+              >
+                <svg
+                  data-icon="comparison"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M6 8H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm13-6h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 3h-5V3h5v2zM6 14H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1zM6 2H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm4-2c-.55 0-1 .45-1 1v18c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1zm9 14h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1zm0 3h-5v-2h5v2zm0-9h-5c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h5c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm0 3h-5V9h5v2z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -102,9 +126,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-align-left"
-                data-icon="align-left"
-              />
+                class="bp5-icon bp5-icon-align-left"
+              >
+                <svg
+                  data-icon="align-left"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -117,9 +153,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
             >
               <span
                 aria-hidden="true"
-                class="bp5-icon bp5-icon-large bp5-icon-align-justify"
-                data-icon="align-justify"
-              />
+                class="bp5-icon bp5-icon-align-justify"
+              >
+                <svg
+                  data-icon="align-justify"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M1 3h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm18 14H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0-12H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0 4H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zm0 4H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
               <span
                 class="bp5-button-text"
               >
@@ -234,9 +282,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
               >
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-wrench"
-                  data-icon="wrench"
-                />
+                  class="bp5-icon bp5-icon-wrench"
+                >
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
                 <span
                   class="bp5-button-text"
                 >
@@ -244,9 +304,21 @@ exports[`TaskTableActionDialog matches snapshot 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-                  data-icon="caret-down"
-                />
+                  class="bp5-icon bp5-icon-caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </button>
             </span>
           </div>
diff --git a/web-console/src/setup-tests.ts b/web-console/src/setup-tests.ts
index 518045d6b6da..aa6cd6753b2f 100644
--- a/web-console/src/setup-tests.ts
+++ b/web-console/src/setup-tests.ts
@@ -19,6 +19,12 @@
 import 'core-js/stable';
 import './bootstrap/ace';
 
+import { Icons } from '@blueprintjs/icons';
+
 import { UrlBaser } from './singletons';
 
 UrlBaser.baseUrl = '/some/base_url';
+
+beforeAll(async () => {
+  await Icons.loadAll();
+});
diff --git a/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap b/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
index a3b801d37bf4..8a2b0a11148c 100644
--- a/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/datasources-card/__snapshots__/datasources-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`DatasourcesCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-multi-select"
-        data-icon="multi-select"
-      />
+        class="bp5-icon bp5-icon-multi-select"
+      >
+        <svg
+          data-icon="multi-select"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 3.98H4c-.55 0-1 .45-1 1v1h8v5h1c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm3-3H7c-.55 0-1 .45-1 1v1h8v5h1c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm-6 6H1c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm-1 5H2v-3h6v3z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Datasources
     </h5>
diff --git a/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap b/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
index 8f5843e0def1..e121136883cd 100644
--- a/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/home-view-card/__snapshots__/home-view-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`HomeViewCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-database"
-        data-icon="database"
-      />
+        class="bp5-icon bp5-icon-database"
+      >
+        <svg
+          data-icon="database"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 4c3.31 0 6-.9 6-2s-2.69-2-6-2C4.68 0 2 .9 2 2s2.68 2 6 2zm-6-.48V8c0 1.1 2.69 2 6 2s6-.9 6-2V3.52C12.78 4.4 10.56 5 8 5s-4.78-.6-6-1.48zm0 6V14c0 1.1 2.69 2 6 2s6-.9 6-2V9.52C12.78 10.4 10.56 11 8 11s-4.78-.6-6-1.48z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Something
     </h5>
diff --git a/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap b/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
index 4868b6d1a209..7077d7608fff 100644
--- a/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/lookups-card/__snapshots__/lookups-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`LookupsCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-properties"
-        data-icon="properties"
-      />
+        class="bp5-icon bp5-icon-properties"
+      >
+        <svg
+          data-icon="properties"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-3h9c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm-4 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm13-5H6c-.55 0-1 .45-1 1s.45 1 1 1h9c.55 0 1-.45 1-1s-.45-1-1-1zm0 6H6c-.55 0-1 .45-1 1s.45 1 1 1h9c.55 0 1-.45 1-1s-.45-1-1-1zM2 0C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Lookups
     </h5>
diff --git a/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap b/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
index fd87fb456622..e36e3e9e1cce 100644
--- a/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/segments-card/__snapshots__/segments-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`SegmentsCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-stacked-chart"
-        data-icon="stacked-chart"
-      />
+        class="bp5-icon bp5-icon-stacked-chart"
+      >
+        <svg
+          data-icon="stacked-chart"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M10 2c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v3h3V2zm3 10h1c.55 0 1-.45 1-1V8h-3v3c0 .55.45 1 1 1zm2-7c0-.55-.45-1-1-1h-1c-.55 0-1 .45-1 1v2h3V5zm-5 1H7v3h3V6zM5 7c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v1h3V7zm3 5h1c.55 0 1-.45 1-1v-1H7v1c0 .55.45 1 1 1zm7 1H2c-.55 0-1 .45-1 1s.45 1 1 1h13c.55 0 1-.45 1-1s-.45-1-1-1zM3 12h1c.55 0 1-.45 1-1V9H2v2c0 .55.45 1 1 1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Segments
     </h5>
diff --git a/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap b/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
index 1a28396e2a61..fce4a63b1759 100644
--- a/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/services-card/__snapshots__/services-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`ServicesCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-database"
-        data-icon="database"
-      />
+        class="bp5-icon bp5-icon-database"
+      >
+        <svg
+          data-icon="database"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 4c3.31 0 6-.9 6-2s-2.69-2-6-2C4.68 0 2 .9 2 2s2.68 2 6 2zm-6-.48V8c0 1.1 2.69 2 6 2s6-.9 6-2V3.52C12.78 4.4 10.56 5 8 5s-4.78-.6-6-1.48zm0 6V14c0 1.1 2.69 2 6 2s6-.9 6-2V9.52C12.78 10.4 10.56 11 8 11s-4.78-.6-6-1.48z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Services
     </h5>
diff --git a/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap b/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
index 414fbdc73b09..bd384c4bcd40 100644
--- a/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/status-card/__snapshots__/status-card.spec.tsx.snap
@@ -12,9 +12,22 @@ exports[`StatusCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-graph"
-        data-icon="graph"
-      />
+        class="bp5-icon bp5-icon-graph"
+      >
+        <svg
+          data-icon="graph"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M14 3c-1.06 0-1.92.83-1.99 1.88l-1.93.97A2.95 2.95 0 008 5c-.56 0-1.08.16-1.52.43L3.97 3.34C3.98 3.23 4 3.12 4 3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.24 0 .47-.05.68-.13l2.51 2.09C5.08 7.29 5 7.63 5 8c0 .96.46 1.81 1.16 2.35l-.56 1.69c-.91.19-1.6.99-1.6 1.96 0 1.1.9 2 2 2s2-.9 2-2c0-.51-.2-.97-.51-1.32l.56-1.69A2.99 2.99 0 0011 8c0-.12-.02-.24-.04-.36l1.94-.97c.32.21.69.33 1.1.33 1.1 0 2-.9 2-2s-.9-2-2-2z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Status
     </h5>
diff --git a/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap b/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
index 292932aeb3e4..b3eacfa6f68e 100644
--- a/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/supervisors-card/__snapshots__/supervisors-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`SupervisorsCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-eye-open"
-        data-icon="eye-open"
-      />
+        class="bp5-icon bp5-icon-eye-open"
+      >
+        <svg
+          data-icon="eye-open"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Supervisors
     </h5>
diff --git a/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap b/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
index aa41392318c8..e0b241941284 100644
--- a/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
+++ b/web-console/src/views/home-view/tasks-card/__snapshots__/tasks-card.spec.tsx.snap
@@ -13,9 +13,22 @@ exports[`TasksCard matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-gantt-chart"
-        data-icon="gantt-chart"
-      />
+        class="bp5-icon bp5-icon-gantt-chart"
+      >
+        <svg
+          data-icon="gantt-chart"
+          fill="#bfccd5"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M10 10c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1zM6 7c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1zm9 5H2V3c0-.55-.45-1-1-1s-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zM4 5h3c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
        
       Tasks
     </h5>
diff --git a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
index 0c6743c39eb8..1a5a6520bb88 100644
--- a/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/form-editor/__snapshots__/form-editor.spec.tsx.snap
@@ -26,8 +26,20 @@ exports[`FormEditor matches snapshot 1`] = `
               aria-haspopup="menu"
               aria-hidden="true"
               class="bp5-icon bp5-icon-info-sign"
-              data-icon="info-sign"
-            />
+            >
+              <svg
+                data-icon="info-sign"
+                height="14"
+                role="img"
+                viewBox="0 0 16 16"
+                width="14"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
           </span>
         </span>
       </label>
@@ -61,9 +73,21 @@ exports[`FormEditor matches snapshot 1`] = `
     >
       <span
         aria-hidden="true"
-        class="bp5-icon bp5-icon-standard bp5-icon-trash"
-        data-icon="trash"
-      />
+        class="bp5-icon bp5-icon-trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
     </button>
     <button
       class="bp5-button"
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
index 88ea79154ead..b2106bcbe527 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/complex-menu-items/__snapshots__/complex-menu-items.spec.tsx.snap
@@ -23,10 +23,22 @@ exports[`ComplexMenuItems matches snapshot when menu is opened for column not in
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-function"
-            data-icon="function"
+            class="bp5-icon bp5-icon-function"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="function"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
index e0ac9961e018..a5c19a2b8901 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
@@ -150,10 +150,22 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column inside
       >
         <span
           aria-hidden="true"
-          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
-          data-icon="ungroup-objects"
+          class="bp5-icon bp5-icon-ungroup-objects"
           tabindex="-1"
-        />
+        >
+          <svg
+            data-icon="ungroup-objects"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
       </span>
       <div
         class="bp5-text-overflow-ellipsis bp5-fill"
@@ -255,10 +267,22 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-filter"
-            data-icon="filter"
+            class="bp5-icon bp5-icon-filter"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="filter"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -310,10 +334,22 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
-            data-icon="group-objects"
+            class="bp5-icon bp5-icon-group-objects"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="group-objects"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -365,10 +401,22 @@ exports[`NumberMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-function"
-            data-icon="function"
+            class="bp5-icon bp5-icon-function"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="function"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
index cead0ec0f70c..034c72eef606 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
@@ -150,10 +150,22 @@ exports[`StringMenuItems matches snapshot when menu is opened for column inside
       >
         <span
           aria-hidden="true"
-          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
-          data-icon="ungroup-objects"
+          class="bp5-icon bp5-icon-ungroup-objects"
           tabindex="-1"
-        />
+        >
+          <svg
+            data-icon="ungroup-objects"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
       </span>
       <div
         class="bp5-text-overflow-ellipsis bp5-fill"
@@ -255,10 +267,22 @@ exports[`StringMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-filter"
-            data-icon="filter"
+            class="bp5-icon bp5-icon-filter"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="filter"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -310,10 +334,22 @@ exports[`StringMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
-            data-icon="group-objects"
+            class="bp5-icon bp5-icon-group-objects"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="group-objects"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -365,10 +401,22 @@ exports[`StringMenuItems matches snapshot when menu is opened for column not ins
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-function"
-            data-icon="function"
+            class="bp5-icon bp5-icon-function"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="function"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
index 23858d4718a2..8b6ec0a85df8 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
@@ -150,10 +150,22 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column inside gr
       >
         <span
           aria-hidden="true"
-          class="bp5-icon bp5-icon-standard bp5-icon-ungroup-objects"
-          data-icon="ungroup-objects"
+          class="bp5-icon bp5-icon-ungroup-objects"
           tabindex="-1"
-        />
+        >
+          <svg
+            data-icon="ungroup-objects"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M3.5 5C1.57 5 0 6.57 0 8.5S1.57 12 3.5 12 7 10.43 7 8.5 5.43 5 3.5 5zm9 0C10.57 5 9 6.57 9 8.5s1.57 3.5 3.5 3.5S16 10.43 16 8.5 14.43 5 12.5 5z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
       </span>
       <div
         class="bp5-text-overflow-ellipsis bp5-fill"
@@ -255,10 +267,22 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column not insid
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-filter"
-            data-icon="filter"
+            class="bp5-icon bp5-icon-filter"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="filter"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -310,10 +334,22 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column not insid
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-group-objects"
-            data-icon="group-objects"
+            class="bp5-icon bp5-icon-group-objects"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="group-objects"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M5 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-3H5C2.24 3 0 5.24 0 8s2.24 5 5 5h6c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 9H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h6c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
@@ -365,10 +401,22 @@ exports[`TimeMenuItems matches snapshot when menu is opened for column not insid
         >
           <span
             aria-hidden="true"
-            class="bp5-icon bp5-icon-standard bp5-icon-function"
-            data-icon="function"
+            class="bp5-icon bp5-icon-function"
             tabindex="-1"
-          />
+          >
+            <svg
+              data-icon="function"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8.12 4.74H6.98c.33-1.29.75-2.24 1.28-2.84.33-.37.64-.56.95-.56.06 0 .11.02.15.05.04.04.06.09.06.15 0 .05-.04.15-.13.29-.09.14-.13.28-.13.4 0 .18.07.33.2.46.14.13.31.19.52.19.22 0 .41-.08.56-.23.15-.16.23-.37.23-.63 0-.3-.11-.55-.34-.74C10.1 1.09 9.74 1 9.24 1c-.78 0-1.49.22-2.12.67-.64.45-1.24 1.2-1.81 2.23-.2.36-.38.59-.56.69-.18.1-.46.15-.85.15l-.26.9h1.08l-1.59 6.12c-.27 1.01-.44 1.63-.54 1.86-.14.34-.34.63-.62.87-.11.1-.24.15-.4.15a.15.15 0 01-.11-.04l-.04-.05c0-.03.04-.08.12-.16.08-.08.12-.2.12-.36 0-.18-.06-.33-.19-.44-.12-.12-.3-.18-.54-.18-.28 0-.51.08-.68.23-.16.14-.25.32-.25.53 0 .22.1.42.31.59.21.17.53.25.97.25.7 0 1.32-.18 1.87-.54.54-.36 1.02-.92 1.42-1.67.41-.75.82-1.96 1.25-3.63l.91-3.54h1.1l.29-.89zm5.43 1.52c.2-.15.41-.23.62-.23.08 0 .23.03.45.09s.41.09.57.09c.23 0 .42-.08.57-.23.16-.16.24-.36.24-.61 0-.26-.08-.47-.23-.62-.15-.15-.37-.23-.66-.23-.25 0-.5.06-.72.18-.23.12-.51.38-.86.78-.26.3-.64.81-1.15 1.55-.2-.91-.55-1.75-1.05-2.51l-2.72.46-.06.29c.2-.04.37-.06.51-.06.27 0 .49.11.67.34.28.36.67 1.45 1.17 3.26-.39.52-.66.85-.8 1.01-.24.26-.44.42-.59.5-.12.06-.25.09-.41.09-.11 0-.3-.06-.56-.18-.18-.08-.34-.12-.48-.12-.27 0-.48.08-.66.25-.17.17-.26.38-.26.64 0 .25.08.44.24.6.16.15.37.23.64.23.26 0 .5-.05.73-.16.23-.11.52-.34.86-.69.35-.35.82-.9 1.43-1.67.23.73.44 1.25.61 1.58s.37.57.59.71c.22.15.5.22.83.22.32 0 .65-.11.98-.34.44-.3.88-.81 1.34-1.53l-.26-.15c-.31.43-.54.7-.69.8-.1.07-.22.1-.35.1-.16 0-.32-.1-.48-.3-.27-.34-.62-1.27-1.06-2.8.4-.68.73-1.13 1-1.34z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
         <div
           class="bp5-text-overflow-ellipsis bp5-fill"
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
index 0de516d66dfd..c844c34cfb0c 100644
--- a/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
@@ -10,9 +10,21 @@ exports[`AnchoredQueryTimer matches snapshot with execution 1`] = `
   >
     <span
       aria-hidden="true"
-      class="bp5-icon bp5-icon-standard bp5-icon-stopwatch"
-      data-icon="stopwatch"
-    />
+      class="bp5-icon bp5-icon-stopwatch"
+    >
+      <svg
+        data-icon="stopwatch"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M9 2v1.083A6.002 6.002 0 018 15 6 6 0 017 3.083V2H6a1 1 0 110-2h4a1 1 0 010 2H9zM8 5a4 4 0 104 4H8V5z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
     <span
       class="bp5-button-text"
     >
@@ -25,9 +37,21 @@ exports[`AnchoredQueryTimer matches snapshot with execution 1`] = `
   >
     <span
       aria-hidden="true"
-      class="bp5-icon bp5-icon-standard bp5-icon-cross"
-      data-icon="cross"
-    />
+      class="bp5-icon bp5-icon-cross"
+    >
+      <svg
+        data-icon="cross"
+        height="16"
+        role="img"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
   </button>
 </div>
 `;

From 3fbfb3333c4221e4cc3437c563c1f6cb216cf75b Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 14:08:25 -0700
Subject: [PATCH 11/15] update e2e tests

---
 web-console/e2e-tests/component/datasources/overview.ts  | 2 +-
 web-console/e2e-tests/component/load-data/data-loader.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-console/e2e-tests/component/datasources/overview.ts b/web-console/e2e-tests/component/datasources/overview.ts
index 50a5762c15fc..cb34c3603894 100644
--- a/web-console/e2e-tests/component/datasources/overview.ts
+++ b/web-console/e2e-tests/component/datasources/overview.ts
@@ -131,7 +131,7 @@ export class DatasourcesOverview {
   }
 
   private async waitForPopupMenu(): Promise<void> {
-    await this.page.waitForSelector('ul.bp4-menu');
+    await this.page.waitForSelector('ul.bp5-menu');
   }
 
   async triggerCompaction(): Promise<void> {
diff --git a/web-console/e2e-tests/component/load-data/data-loader.ts b/web-console/e2e-tests/component/load-data/data-loader.ts
index 4462641cb9a1..102ef2d75bfa 100644
--- a/web-console/e2e-tests/component/load-data/data-loader.ts
+++ b/web-console/e2e-tests/component/load-data/data-loader.ts
@@ -66,7 +66,7 @@ export class DataLoader {
   }
 
   private async start() {
-    const cardSelector = `//*[contains(@class,"bp4-card")][p[contains(text(),"${this.connector.name}")]]`;
+    const cardSelector = `//*[contains(@class,"bp5-card")][p[contains(text(),"${this.connector.name}")]]`;
     await this.page.click(cardSelector);
     await clickButton(this.page, 'Connect data');
   }
@@ -126,7 +126,7 @@ export class DataLoader {
     const rollupChecked = await rollupInput!.evaluate(el => (el as HTMLInputElement).checked);
     if (rollupChecked !== configureSchemaConfig.rollup) {
       await this.page.click(rollupSelector);
-      const confirmationDialogSelector = '//*[contains(@class,"bp4-alert-body")]';
+      const confirmationDialogSelector = '//*[contains(@class,"bp5-alert-body")]';
       await this.page.waitForSelector(confirmationDialogSelector);
       await clickButton(this.page, 'Yes');
       const statusMessageSelector = '.recipe-toaster';

From e4ea02a913f51d3934f940022b68040351422f77 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Thu, 18 Jul 2024 14:23:50 -0700
Subject: [PATCH 12/15] Update
 web-console/src/components/segment-timeline/segment-timeline.tsx

Co-authored-by: John Gozde <john@gozde.ca>
---
 .../src/components/segment-timeline/segment-timeline.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index 86aae2b79e26..f703341816af 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -85,7 +85,7 @@ interface IntervalRow {
 
 const DEFAULT_TIME_SPAN_MONTHS = 3;
 
-function getDefautlDateRange(): NonNullDateRange {
+function getDefaultDateRange(): NonNullDateRange {
   const start = ceilToUtcDay(new Date());
   const end = new Date(start.valueOf());
   start.setUTCMonth(start.getUTCMonth() - DEFAULT_TIME_SPAN_MONTHS);

From 7794d948c139720216fc3abe05d99aa6a680d90e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Thu, 18 Jul 2024 14:23:54 -0700
Subject: [PATCH 13/15] Update
 web-console/src/components/segment-timeline/segment-timeline.tsx

Co-authored-by: John Gozde <john@gozde.ca>
---
 .../src/components/segment-timeline/segment-timeline.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index f703341816af..1a2c1d554790 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -249,7 +249,7 @@ ORDER BY "start" DESC`;
 
   constructor(props: SegmentTimelineProps) {
     super(props);
-    const dateRange = getDefautlDateRange();
+    const dateRange = getDefaultDateRange();
 
     this.state = {
       chartWidth: 1, // Dummy init values to be replaced

From d534d03533015d4741609e281c58ae1e17299412 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 14:58:37 -0700
Subject: [PATCH 14/15] update e2e test selector

---
 web-console/e2e-tests/component/datasources/overview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/e2e-tests/component/datasources/overview.ts b/web-console/e2e-tests/component/datasources/overview.ts
index cb34c3603894..f3f7c1a434d5 100644
--- a/web-console/e2e-tests/component/datasources/overview.ts
+++ b/web-console/e2e-tests/component/datasources/overview.ts
@@ -125,7 +125,7 @@ export class DatasourcesOverview {
       throw new Error(`Could not find datasource: ${datasourceName}`);
     }
 
-    const editActions = await this.page.$$('.action-cell span[icon=more]');
+    const editActions = await this.page.$$('.action-cell span.bp5-icon-more');
     await editActions[index].click();
     await this.waitForPopupMenu();
   }

From 3a5a5e80a6a8c93e190c598123db222f51f9ef26 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 18 Jul 2024 15:28:29 -0700
Subject: [PATCH 15/15] direct import date-fns

---
 web-console/package-lock.json                                   | 1 +
 web-console/package.json                                        | 1 +
 .../src/components/segment-timeline/segment-timeline.tsx        | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 3b7e8c4e9bba..c7c7d271ce76 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -28,6 +28,7 @@
         "d3-dsv": "^2.0.0",
         "d3-scale": "^3.3.0",
         "d3-selection": "^2.0.0",
+        "date-fns": "^2.28.0",
         "echarts": "^5.4.3",
         "file-saver": "^2.0.5",
         "fontsource-open-sans": "^3.0.9",
diff --git a/web-console/package.json b/web-console/package.json
index 7d5a094405ad..b45b1bdb8655 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -82,6 +82,7 @@
     "d3-dsv": "^2.0.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^2.0.0",
+    "date-fns": "^2.28.0",
     "echarts": "^5.4.3",
     "file-saver": "^2.0.5",
     "fontsource-open-sans": "^3.0.9",
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index 1a2c1d554790..7527b8017637 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -24,6 +24,7 @@ import type { ItemPredicate, ItemRenderer } from '@blueprintjs/select';
 import { Select } from '@blueprintjs/select';
 import type { AxisScale } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
+import { enUS } from 'date-fns/locale';
 import React from 'react';
 
 import type { Capabilities } from '../../helpers';
@@ -623,6 +624,7 @@ ORDER BY "start" DESC`;
                 });
               }}
               fill
+              locale={enUS}
             />
           </FormGroup>
           <FormGroup label="Datasource">