You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/09/18 01:12:03 UTC

[incubator-devlake] branch feat-6079 created (now 39d7284e9)

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a change to branch feat-6079
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


      at 39d7284e9 feat(config-ui): upgrade blueprintjs to v5

This branch includes the following new commits:

     new 39d7284e9 feat(config-ui): upgrade blueprintjs to v5

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[incubator-devlake] 01/01: feat(config-ui): upgrade blueprintjs to v5

Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch feat-6079
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit 39d7284e92601553f23c83d20f417dfbab5e6118
Author: mintsweet <0x...@gmail.com>
AuthorDate: Mon Sep 18 13:11:48 2023 +1200

    feat(config-ui): upgrade blueprintjs to v5
---
 config-ui/package.json                             |   8 +-
 config-ui/src/components/buttons/index.tsx         |   6 +-
 config-ui/src/components/message/index.tsx         |   9 +-
 config-ui/src/components/page-header/styled.ts     |   4 +-
 config-ui/src/components/table/styled.ts           |   4 +-
 .../src/components/tooltip/help-tooltip/index.tsx  |   4 +-
 .../src/components/tooltip/text-tooltip/index.tsx  |   2 +-
 .../pages/blueprint/connection-detail/index.tsx    |  12 +-
 .../pages/blueprint/connection-detail/styled.ts    |  24 ---
 .../detail/components/sync-policy/styled.ts        |   6 +-
 .../pages/blueprint/detail/configuration-panel.tsx |   2 +-
 config-ui/src/pages/blueprint/detail/styled.ts     |   4 +-
 config-ui/src/pages/blueprint/home/styled.ts       |   2 +-
 config-ui/src/pages/connection/detail/index.tsx    |  12 +-
 config-ui/src/pages/connection/detail/styled.ts    |   8 -
 config-ui/src/pages/connection/home/styled.ts      |   2 +-
 config-ui/src/pages/project/detail/styled.ts       |   4 +-
 config-ui/src/pages/project/home/styled.ts         |   2 +-
 .../components/connection-form/fields/styled.ts    |   2 +-
 .../plugins/components/connection-form/index.tsx   |   8 +-
 .../plugins/components/connection-form/styled.ts   |  17 +-
 .../plugins/components/data-scope-select/index.tsx |   2 +-
 .../components/scope-config-form/fields/styled.ts  |   6 +-
 .../components/scope-config-select/index.tsx       |   2 +-
 config-ui/src/plugins/register/azure/styled.ts     |  10 +-
 config-ui/src/plugins/register/bitbucket/styled.ts |   8 +-
 config-ui/src/plugins/register/github/styled.ts    |  10 +-
 config-ui/src/plugins/register/gitlab/styled.ts    |   4 +-
 config-ui/src/plugins/register/jenkins/styled.ts   |   4 +-
 config-ui/src/plugins/register/jira/styled.ts      |   6 +-
 .../register/jira/transformation-fields/styled.ts  |   4 +-
 config-ui/src/plugins/register/tapd/styled.ts      |   6 +-
 .../src/plugins/register/webook/connection.tsx     |   2 +-
 config-ui/src/plugins/register/webook/styled.ts    |   2 +-
 .../error/components/needs-db-migrate/index.tsx    |   8 +-
 config-ui/src/routes/error/styled.ts               |   7 +-
 config-ui/src/routes/layout/styled.ts              |   6 +-
 config-ui/src/routes/pipeline/styled.ts            |   2 +-
 config-ui/yarn.lock                                | 238 +++++++--------------
 39 files changed, 170 insertions(+), 299 deletions(-)

diff --git a/config-ui/package.json b/config-ui/package.json
index d4a68c9fa..e0e49a479 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.5.1",
-    "@blueprintjs/core": "^4.13.0",
-    "@blueprintjs/datetime2": "^0.9.6",
-    "@blueprintjs/popover2": "^1.10.2",
-    "@blueprintjs/select": "^4.8.12",
+    "@blueprintjs/core": "^5.3.0",
+    "@blueprintjs/datetime2": "^1.0.10",
+    "@blueprintjs/popover2": "^2.0.10",
+    "@blueprintjs/select": "^5.0.10",
     "ahooks": "^3.7.8",
     "axios": "^0.21.4",
     "classnames": "^2.3.2",
diff --git a/config-ui/src/components/buttons/index.tsx b/config-ui/src/components/buttons/index.tsx
index 550eb21fa..8975345cc 100644
--- a/config-ui/src/components/buttons/index.tsx
+++ b/config-ui/src/components/buttons/index.tsx
@@ -18,7 +18,7 @@
 
 import styled from 'styled-components';
 
-const Wrapper = styled.div<{ position: 'top' | 'bottom'; align: 'left' | 'right' | 'center' }>`
+const Wrapper = styled.div<{ position?: 'top' | 'bottom'; align: 'left' | 'right' | 'center' }>`
   display: flex;
   align-items: center;
 
@@ -46,7 +46,7 @@ const Wrapper = styled.div<{ position: 'top' | 'bottom'; align: 'left' | 'right'
     }
   }}
 
-  .bp4-button + .bp4-button {
+  .bp5-button + .bp5-button {
     margin-left: 8px;
   }
 `;
@@ -58,7 +58,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export const Buttons = ({ style, position = 'top', align = 'left', children }: Props) => {
+export const Buttons = ({ style, position, align = 'left', children }: Props) => {
   return (
     <Wrapper style={style} position={position} align={align}>
       {children}
diff --git a/config-ui/src/components/message/index.tsx b/config-ui/src/components/message/index.tsx
index 5bee8625b..9540aec14 100644
--- a/config-ui/src/components/message/index.tsx
+++ b/config-ui/src/components/message/index.tsx
@@ -23,20 +23,21 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
 
-  & > .bp4-icon {
-    margin-right: 8px;
+  & > .bp5-icon {
+    margin-right: 16px;
   }
 `;
 
 interface Props {
   style?: React.CSSProperties;
+  size?: number;
   content: React.ReactNode;
 }
 
-export const Message = ({ style, content }: Props) => {
+export const Message = ({ style, size = 20, content }: Props) => {
   return (
     <Wrapper style={style}>
-      <Icon icon="warning-sign" size={24} color="#f4be55" />
+      <Icon icon="warning-sign" size={size} color="#f4be55" />
       <span>{content}</span>
     </Wrapper>
   );
diff --git a/config-ui/src/components/page-header/styled.ts b/config-ui/src/components/page-header/styled.ts
index 05ec967e5..b5cd98489 100644
--- a/config-ui/src/components/page-header/styled.ts
+++ b/config-ui/src/components/page-header/styled.ts
@@ -35,6 +35,8 @@ export const Breadcrumbs = styled.ul`
 `;
 
 export const Breadcrumb = styled.li`
+  display: flex;
+  align-items: center;
   font-size: 24px;
   font-weight: 600;
 
@@ -43,7 +45,7 @@ export const Breadcrumb = styled.li`
     align-items: center;
     color: #292b3f;
 
-    .bp4-icon {
+    .bp5-icon {
       margin: 0 10px;
     }
   }
diff --git a/config-ui/src/components/table/styled.ts b/config-ui/src/components/table/styled.ts
index c6ee203b6..58d093623 100644
--- a/config-ui/src/components/table/styled.ts
+++ b/config-ui/src/components/table/styled.ts
@@ -39,7 +39,7 @@ export const TH = styled.th`
   font-weight: 400;
   border-bottom: 1px solid #dbdcdf;
 
-  label.bp4-control {
+  label.bp5-control {
     margin-bottom: 0;
   }
 `;
@@ -49,7 +49,7 @@ export const TD = styled.td`
   border-bottom: 1px solid #dbdcdf;
   word-break: break-word;
 
-  label.bp4-control {
+  label.bp5-control {
     margin-bottom: 0;
   }
 `;
diff --git a/config-ui/src/components/tooltip/help-tooltip/index.tsx b/config-ui/src/components/tooltip/help-tooltip/index.tsx
index 699dc90e4..fe1c1bd0f 100644
--- a/config-ui/src/components/tooltip/help-tooltip/index.tsx
+++ b/config-ui/src/components/tooltip/help-tooltip/index.tsx
@@ -23,10 +23,10 @@ import styled from 'styled-components';
 const Wrapper = styled.span`
   margin-left: 4px;
 
-  & > .bp4-popover2-target {
+  & > .bp5-popover2-target {
     display: inline-block !important;
 
-    .bp4-icon {
+    .bp5-icon {
       display: block;
       cursor: pointer;
     }
diff --git a/config-ui/src/components/tooltip/text-tooltip/index.tsx b/config-ui/src/components/tooltip/text-tooltip/index.tsx
index ff0ba7001..f501d6347 100644
--- a/config-ui/src/components/tooltip/text-tooltip/index.tsx
+++ b/config-ui/src/components/tooltip/text-tooltip/index.tsx
@@ -24,7 +24,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   width: 100%;
 
-  & > .bp4-popover2-target {
+  & > .bp5-popover2-target {
     display: block;
     overflow: hidden;
     white-space: nowrap;
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 182145201..6c1c35971 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -21,7 +21,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Button, Intent, Position } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 
-import { PageLoading, PageHeader, ExternalLink, Buttons, Table, Dialog, Message } from '@/components';
+import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Table, Dialog } from '@/components';
 import { useRefreshData, useTips } from '@/hooks';
 import { DataScopeSelect, getPluginScopeId } from '@/plugins';
 import { operator } from '@/utils';
@@ -185,10 +185,10 @@ export const BlueprintConnectionDetailPage = () => {
           position={Position.BOTTOM}
           content={
             <S.ActionDelete>
-              <div className="content">Are you sure you want to remove the connection from this project/blueprint?</div>
-              <div className="btns" onClick={handleRemoveConnection}>
-                <Button intent={Intent.PRIMARY} text="Confirm" />
-              </div>
+              <Message content="Are you sure you want to remove the connection from this project/blueprint?" />
+              <Buttons position="bottom" align="right">
+                <Button intent={Intent.PRIMARY} text="Confirm" onClick={handleRemoveConnection} />
+              </Buttons>
             </S.ActionDelete>
           }
         >
@@ -197,7 +197,7 @@ export const BlueprintConnectionDetailPage = () => {
           </Button>
         </Popover2>
       </S.Top>
-      <Buttons>
+      <Buttons position="top">
         <Button intent={Intent.PRIMARY} icon="annotation" text="Manage Data Scope" onClick={handleShowDataScope} />
         <ExternalLink style={{ marginLeft: 8 }} link={`/connections/${connection.plugin}/${connection.id}`}>
           <Button intent={Intent.PRIMARY} icon="annotation" text="Edit Scope Config" />
diff --git a/config-ui/src/pages/blueprint/connection-detail/styled.ts b/config-ui/src/pages/blueprint/connection-detail/styled.ts
index 716316b8c..d15597d71 100644
--- a/config-ui/src/pages/blueprint/connection-detail/styled.ts
+++ b/config-ui/src/pages/blueprint/connection-detail/styled.ts
@@ -27,13 +27,6 @@ export const Top = styled.div`
 
 export const ActionDelete = styled.div`
   padding: 16px 24px;
-
-  .btns {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    margin-top: 16px;
-  }
 `;
 
 export const Entities = styled.div`
@@ -60,20 +53,3 @@ export const Entities = styled.div`
     }
   }
 `;
-
-export const SelectTransformationWrapper = styled.div`
-  .action {
-    margin-bottom: 24px;
-  }
-
-  .btns {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    margin-top: 24px;
-
-    .bp4-button + .bp4-button {
-      margin-left: 4px;
-    }
-  }
-`;
diff --git a/config-ui/src/pages/blueprint/detail/components/sync-policy/styled.ts b/config-ui/src/pages/blueprint/detail/components/sync-policy/styled.ts
index a2f1e3327..d6340da7d 100644
--- a/config-ui/src/pages/blueprint/detail/components/sync-policy/styled.ts
+++ b/config-ui/src/pages/blueprint/detail/components/sync-policy/styled.ts
@@ -45,15 +45,15 @@ export const Input = styled.div`
   display: flex;
   align-items: center;
 
-  .bp4-form-group {
+  .bp5-form-group {
     margin-bottom: 4px;
   }
 
-  .bp4-form-group + .bp4-form-group {
+  .bp5-form-group + .bp5-form-group {
     margin-left: 8px;
   }
 
-  .bp4-input {
+  .bp5-input {
     width: 60px;
   }
 `;
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index 0b6c11a5f..5dd944917 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -192,7 +192,7 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
             />
           ) : (
             <>
-              <Buttons>
+              <Buttons position="top">
                 <Button
                   intent={Intent.PRIMARY}
                   icon="add"
diff --git a/config-ui/src/pages/blueprint/detail/styled.ts b/config-ui/src/pages/blueprint/detail/styled.ts
index cc28fb174..d8b2f3945 100644
--- a/config-ui/src/pages/blueprint/detail/styled.ts
+++ b/config-ui/src/pages/blueprint/detail/styled.ts
@@ -26,7 +26,7 @@ export const DialogBody = styled.div`
   display: flex;
   align-items: center;
 
-  .bp4-icon {
+  .bp5-icon {
     margin-right: 8px;
     color: #f4be55;
   }
@@ -108,7 +108,7 @@ export const BlueprintAction = styled.div`
   justify-content: center;
   align-items: center;
 
-  & > .bp4-switch {
+  & > .bp5-switch {
     margin: 0 8px;
   }
 `;
diff --git a/config-ui/src/pages/blueprint/home/styled.ts b/config-ui/src/pages/blueprint/home/styled.ts
index 1cf236862..99ee9eaf5 100644
--- a/config-ui/src/pages/blueprint/home/styled.ts
+++ b/config-ui/src/pages/blueprint/home/styled.ts
@@ -28,7 +28,7 @@ export const Wrapper = styled.div`
 `;
 
 export const DialogWrapper = styled.div`
-  .bp4-form-group + .bp4-form-group {
+  .bp5-form-group + .bp5-form-group {
     margin-top: 40px;
     margin-bottom: 0;
   }
diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
index c16b574ba..10b6eaf46 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -237,20 +237,18 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
       ]}
       extra={
         <S.PageHeaderExtra>
-          <div className="status">
-            <span style={{ marginRight: 4 }}>Status:</span>
-            <ConnectionStatus status={status} unique={unique} onTest={onTest} />
-          </div>
-          <div className="btns">
+          <span style={{ marginRight: 4 }}>Status:</span>
+          <ConnectionStatus status={status} unique={unique} onTest={onTest} />
+          <Buttons style={{ marginLeft: 8 }}>
             <Button outlined intent={Intent.PRIMARY} icon="annotation" text="Edit" onClick={handleShowUpdateDialog} />
             <Button intent={Intent.DANGER} icon="trash" text="Delete" onClick={handleShowDeleteDialog} />
-          </div>
+          </Buttons>
         </S.PageHeaderExtra>
       }
     >
       <S.Wrapper>
         <div className="top">Please note: In order to view DORA metrics, you will need to add Scope Configs.</div>
-        <Buttons>
+        <Buttons position="top">
           <Button intent={Intent.PRIMARY} icon="add" text="Add Data Scope" onClick={handleShowCreateDataScopeDialog} />
           {plugin !== 'tapd' && pluginConfig.scopeConfig && (
             <Button
diff --git a/config-ui/src/pages/connection/detail/styled.ts b/config-ui/src/pages/connection/detail/styled.ts
index 5d95ab9ff..92c580d12 100644
--- a/config-ui/src/pages/connection/detail/styled.ts
+++ b/config-ui/src/pages/connection/detail/styled.ts
@@ -21,14 +21,6 @@ import styled from 'styled-components';
 export const PageHeaderExtra = styled.div`
   display: flex;
   align-items: center;
-
-  .btns {
-    margin-left: 8px;
-
-    .bp4-button + .bp4-button {
-      margin-left: 8px;
-    }
-  }
 `;
 
 export const Wrapper = styled.div`
diff --git a/config-ui/src/pages/connection/home/styled.ts b/config-ui/src/pages/connection/home/styled.ts
index f2a24e7d3..6c5cf8c0b 100644
--- a/config-ui/src/pages/connection/home/styled.ts
+++ b/config-ui/src/pages/connection/home/styled.ts
@@ -75,7 +75,7 @@ export const Wrapper = styled.div`
       }
     }
 
-    & > .bp4-tag {
+    & > .bp5-tag {
       position: absolute;
       top: 0;
       right: 0;
diff --git a/config-ui/src/pages/project/detail/styled.ts b/config-ui/src/pages/project/detail/styled.ts
index cca7675d9..c078ca867 100644
--- a/config-ui/src/pages/project/detail/styled.ts
+++ b/config-ui/src/pages/project/detail/styled.ts
@@ -19,7 +19,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  & > .bp4-tabs > .bp4-tab-list {
+  & > .bp5-tabs > .bp5-tab-list {
     display: flex;
     justify-content: center;
   }
@@ -29,7 +29,7 @@ export const DialogBody = styled.div`
   display: flex;
   align-items: center;
 
-  .bp4-icon {
+  .bp5-icon {
     margin-right: 8px;
     color: #f4be55;
   }
diff --git a/config-ui/src/pages/project/home/styled.ts b/config-ui/src/pages/project/home/styled.ts
index 1449bc5ca..86e2c5568 100644
--- a/config-ui/src/pages/project/home/styled.ts
+++ b/config-ui/src/pages/project/home/styled.ts
@@ -19,7 +19,7 @@
 import styled from 'styled-components';
 
 export const DialogWrapper = styled.div`
-  .bp4-form-group + .bp4-form-group {
+  .bp5-form-group + .bp5-form-group {
     margin-top: 40px;
     margin-bottom: 0;
   }
diff --git a/config-ui/src/plugins/components/connection-form/fields/styled.ts b/config-ui/src/plugins/components/connection-form/fields/styled.ts
index d48455c0e..34a37cacb 100644
--- a/config-ui/src/plugins/components/connection-form/fields/styled.ts
+++ b/config-ui/src/plugins/components/connection-form/fields/styled.ts
@@ -35,7 +35,7 @@ export const RateLimit = styled.div`
   display: flex;
   align-items: center;
 
-  .bp4-input-group {
+  .bp5-input-group {
     width: 80px !important;
   }
 
diff --git a/config-ui/src/plugins/components/connection-form/index.tsx b/config-ui/src/plugins/components/connection-form/index.tsx
index bfb594fef..0bff7edf3 100644
--- a/config-ui/src/plugins/components/connection-form/index.tsx
+++ b/config-ui/src/plugins/components/connection-form/index.tsx
@@ -17,10 +17,10 @@
  */
 
 import { useMemo, useState } from 'react';
-import { ButtonGroup, Button, Intent } from '@blueprintjs/core';
+import { Button, Intent } from '@blueprintjs/core';
 import { pick } from 'lodash';
 
-import { ExternalLink, PageLoading } from '@/components';
+import { ExternalLink, PageLoading, Buttons } from '@/components';
 import { useRefreshData } from '@/hooks';
 import { getPluginConfig } from '@/plugins';
 import { operator } from '@/utils';
@@ -116,7 +116,7 @@ export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
           setValues={setValues}
           setErrors={setErrors}
         />
-        <ButtonGroup className="btns">
+        <Buttons position="bottom" align="right">
           <Button loading={operating} disabled={disabled} outlined text="Test Connection" onClick={handleTest} />
           <Button
             loading={operating}
@@ -126,7 +126,7 @@ export const ConnectionForm = ({ plugin, connectionId, onSuccess }: Props) => {
             text="Save Connection"
             onClick={handleSave}
           />
-        </ButtonGroup>
+        </Buttons>
       </S.Form>
     </S.Wrapper>
   );
diff --git a/config-ui/src/plugins/components/connection-form/styled.ts b/config-ui/src/plugins/components/connection-form/styled.ts
index 8012bf159..7a418c3d9 100644
--- a/config-ui/src/plugins/components/connection-form/styled.ts
+++ b/config-ui/src/plugins/components/connection-form/styled.ts
@@ -30,19 +30,19 @@ export const Tips = styled.div`
 `;
 
 export const Form = styled.div`
-  .bp4-form-group label.bp4-label {
+  .bp5-form-group label.bp5-label {
     margin: 0 0 8px 0;
   }
 
-  .bp4-form-group .bp4-form-group-sub-label {
+  .bp5-form-group .bp5-form-group-sub-label {
     margin: 0 0 8px 0;
   }
 
-  .bp4-input-group {
+  .bp5-input-group {
     width: 386px;
   }
 
-  .bp4-input {
+  .bp5-input {
     border: 1px solid #dbe4fd;
     box-shadow: none;
     border-radius: 4px;
@@ -51,13 +51,4 @@ export const Form = styled.div`
       color: #b8b8bf;
     }
   }
-
-  .btns {
-    display: flex;
-    justify-content: end;
-
-    .bp4-button + .bp4-button {
-      margin-left: 8px;
-    }
-  }
 `;
diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx
index fdf64de6d..ca7f62c2c 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -131,7 +131,7 @@ export const DataScopeSelect = ({
               }
             />
           ) : (
-            <Buttons>
+            <Buttons position="top">
               <Button intent={Intent.PRIMARY} icon="refresh" text="Refresh Data Scope" />
             </Buttons>
           )}
diff --git a/config-ui/src/plugins/components/scope-config-form/fields/styled.ts b/config-ui/src/plugins/components/scope-config-form/fields/styled.ts
index 67b74fac5..bfdf077a4 100644
--- a/config-ui/src/plugins/components/scope-config-form/fields/styled.ts
+++ b/config-ui/src/plugins/components/scope-config-form/fields/styled.ts
@@ -22,7 +22,7 @@ export const AdditionalSettings = styled.div`
     display: flex;
     align-items: center;
 
-    .bp4-switch {
+    .bp5-switch {
       margin: 0;
     }
   }
@@ -36,7 +36,7 @@ export const AdditionalSettings = styled.div`
       margin: 0;
     }
 
-    .bp4-control {
+    .bp5-control {
       margin: 0;
     }
   }
@@ -46,7 +46,7 @@ export const AdditionalSettings = styled.div`
     align-items: center;
     padding-left: 20px;
 
-    .bp4-input-group {
+    .bp5-input-group {
       margin: 0 8px;
     }
   }
diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
index ae424f2a4..0b11031ce 100644
--- a/config-ui/src/plugins/components/scope-config-select/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -71,7 +71,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
 
   return (
     <S.Wrapper>
-      <Buttons>
+      <Buttons position="top">
         <Button icon="add" intent={Intent.PRIMARY} text="Add New Scope Config" onClick={handleShowDialog} />
       </Buttons>
       <Table
diff --git a/config-ui/src/plugins/register/azure/styled.ts b/config-ui/src/plugins/register/azure/styled.ts
index d8292a869..2502260e9 100644
--- a/config-ui/src/plugins/register/azure/styled.ts
+++ b/config-ui/src/plugins/register/azure/styled.ts
@@ -19,15 +19,15 @@
 import styled from 'styled-components';
 
 export const Transfromation = styled.div`
-  .bp4-form-group {
+  .bp5-form-group {
     display: flex;
     align-items: center;
 
-    .bp4-label {
+    .bp5-label {
       flex: 0 0 140px;
     }
 
-    .bp4-form-content {
+    .bp5-form-content {
       flex: auto;
     }
   }
@@ -44,7 +44,7 @@ export const CICD = styled.div`
       font-size: 14px;
       font-weight: 400;
 
-      .bp4-switch {
+      .bp5-switch {
         margin-bottom: 0;
       }
     }
@@ -56,7 +56,7 @@ export const CICD = styled.div`
     margin-top: 16px;
     padding-left: 24px;
 
-    .bp4-radio {
+    .bp5-radio {
       margin-right: 0;
     }
   }
diff --git a/config-ui/src/plugins/register/bitbucket/styled.ts b/config-ui/src/plugins/register/bitbucket/styled.ts
index 402967310..2a60f6e6f 100644
--- a/config-ui/src/plugins/register/bitbucket/styled.ts
+++ b/config-ui/src/plugins/register/bitbucket/styled.ts
@@ -31,15 +31,15 @@ export const Transformation = styled.div`
     }
   }
 
-  .bp4-form-group {
+  .bp5-form-group {
     display: flex;
     align-items: center;
 
-    .bp4-label {
+    .bp5-label {
       flex: 0 0 140px;
     }
 
-    .bp4-form-content {
+    .bp5-form-content {
       flex: auto;
     }
   }
@@ -56,7 +56,7 @@ export const CICD = styled.div`
       font-size: 14px;
       font-weight: 400;
 
-      .bp4-switch {
+      .bp5-switch {
         margin-bottom: 0;
       }
     }
diff --git a/config-ui/src/plugins/register/github/styled.ts b/config-ui/src/plugins/register/github/styled.ts
index 71be509e7..e97be4235 100644
--- a/config-ui/src/plugins/register/github/styled.ts
+++ b/config-ui/src/plugins/register/github/styled.ts
@@ -31,15 +31,15 @@ export const Transformation = styled.div`
     }
   }
 
-  .bp4-form-group {
+  .bp5-form-group {
     display: flex;
     align-items: center;
 
-    .bp4-label {
+    .bp5-label {
       flex: 0 0 140px;
     }
 
-    .bp4-form-content {
+    .bp5-form-content {
       flex: auto;
     }
   }
@@ -56,7 +56,7 @@ export const CICD = styled.div`
       font-size: 14px;
       font-weight: 400;
 
-      .bp4-switch {
+      .bp5-switch {
         margin-bottom: 0;
       }
     }
@@ -68,7 +68,7 @@ export const CICD = styled.div`
     margin-top: 16px;
     padding-left: 24px;
 
-    .bp4-radio {
+    .bp5-radio {
       margin-right: 0;
     }
   }
diff --git a/config-ui/src/plugins/register/gitlab/styled.ts b/config-ui/src/plugins/register/gitlab/styled.ts
index 3de9b32b9..dd82971ed 100644
--- a/config-ui/src/plugins/register/gitlab/styled.ts
+++ b/config-ui/src/plugins/register/gitlab/styled.ts
@@ -31,7 +31,7 @@ export const CICD = styled.div`
       font-size: 14px;
       font-weight: 400;
 
-      .bp4-switch {
+      .bp5-switch {
         margin-bottom: 0;
       }
     }
@@ -43,7 +43,7 @@ export const CICD = styled.div`
     margin-top: 16px;
     padding-left: 24px;
 
-    .bp4-radio {
+    .bp5-radio {
       margin-right: 0;
     }
   }
diff --git a/config-ui/src/plugins/register/jenkins/styled.ts b/config-ui/src/plugins/register/jenkins/styled.ts
index 42dc53665..5b1ce515c 100644
--- a/config-ui/src/plugins/register/jenkins/styled.ts
+++ b/config-ui/src/plugins/register/jenkins/styled.ts
@@ -31,7 +31,7 @@ export const CICD = styled.div`
       font-size: 14px;
       font-weight: 400;
 
-      .bp4-switch {
+      .bp5-switch {
         margin-bottom: 0;
       }
     }
@@ -43,7 +43,7 @@ export const CICD = styled.div`
     margin-top: 16px;
     padding-left: 24px;
 
-    .bp4-radio {
+    .bp5-radio {
       margin-right: 0;
     }
   }
diff --git a/config-ui/src/plugins/register/jira/styled.ts b/config-ui/src/plugins/register/jira/styled.ts
index b6b5ea4be..5503cb802 100644
--- a/config-ui/src/plugins/register/jira/styled.ts
+++ b/config-ui/src/plugins/register/jira/styled.ts
@@ -31,15 +31,15 @@ export const TransformationWrapper = styled.div`
     }
   }
 
-  .bp4-form-group {
+  .bp5-form-group {
     display: flex;
     align-items: center;
 
-    .bp4-label {
+    .bp5-label {
       flex: 0 0 140px;
     }
 
-    .bp4-form-content {
+    .bp5-form-content {
       flex: auto;
     }
   }
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/styled.ts b/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
index 110865e26..b50d2e2a2 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
+++ b/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
@@ -50,7 +50,7 @@ export const RemoteLinkWrapper = styled.div`
     display: flex;
     align-items: center;
 
-    .bp4-input-group {
+    .bp5-input-group {
       margin-right: 8px;
       width: 680px;
     }
@@ -75,7 +75,7 @@ export const DialogBody = styled.div`
     display: flex;
     align-items: center;
 
-    .bp4-input-group {
+    .bp5-input-group {
       margin-right: 24px;
       width: 360px;
     }
diff --git a/config-ui/src/plugins/register/tapd/styled.ts b/config-ui/src/plugins/register/tapd/styled.ts
index b8457ba73..7b4be7872 100644
--- a/config-ui/src/plugins/register/tapd/styled.ts
+++ b/config-ui/src/plugins/register/tapd/styled.ts
@@ -32,15 +32,15 @@ export const TransformationWrapper = styled.div`
     }
   }
 
-  .bp4-form-group {
+  .bp5-form-group {
     display: flex;
     align-items: center;
 
-    .bp4-label {
+    .bp5-label {
       flex: 0 0 140px;
     }
 
-    .bp4-form-content {
+    .bp5-form-content {
       flex: auto;
     }
   }
diff --git a/config-ui/src/plugins/register/webook/connection.tsx b/config-ui/src/plugins/register/webook/connection.tsx
index b21707fa6..ffde52da7 100644
--- a/config-ui/src/plugins/register/webook/connection.tsx
+++ b/config-ui/src/plugins/register/webook/connection.tsx
@@ -81,7 +81,7 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
 
   return (
     <S.Wrapper>
-      <Buttons>
+      <Buttons position="top">
         <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
       </Buttons>
       <Table
diff --git a/config-ui/src/plugins/register/webook/styled.ts b/config-ui/src/plugins/register/webook/styled.ts
index 73b224e4a..2ac463152 100644
--- a/config-ui/src/plugins/register/webook/styled.ts
+++ b/config-ui/src/plugins/register/webook/styled.ts
@@ -30,7 +30,7 @@ export const Wrapper = styled.div`
     font-weight: 600;
     color: ${Colors.GREEN5};
 
-    .bp4-icon {
+    .bp5-icon {
       margin-right: 8px;
     }
   }
diff --git a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
index fb196794c..11e3213e6 100644
--- a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
+++ b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
@@ -17,10 +17,10 @@
  */
 
 import { useState } from 'react';
-import { Icon, ButtonGroup, Button, Colors, Intent } from '@blueprintjs/core';
+import { Icon, Button, Colors, Intent } from '@blueprintjs/core';
 import { useNavigate } from 'react-router-dom';
 
-import { Card } from '@/components';
+import { Card, Buttons } from '@/components';
 import { operator } from '@/utils';
 
 import * as API from './api';
@@ -53,14 +53,14 @@ export const NeedsDBMigrate = () => {
       <p className="warning">
         Warning: Performing migration may wipe collected data for consistency and re-collecting data may be required.
       </p>
-      <ButtonGroup>
+      <Buttons position="bottom" align="center">
         <Button
           loading={operating}
           text="Proceed to Database Migration"
           intent={Intent.PRIMARY}
           onClick={handleSubmit}
         />
-      </ButtonGroup>
+      </Buttons>
     </Card>
   );
 };
diff --git a/config-ui/src/routes/error/styled.ts b/config-ui/src/routes/error/styled.ts
index e02e0da3f..1b712b809 100644
--- a/config-ui/src/routes/error/styled.ts
+++ b/config-ui/src/routes/error/styled.ts
@@ -38,7 +38,7 @@ export const Inner = styled.div`
     align-items: center;
     margin: 0;
 
-    .bp4-icon {
+    .bp5-icon {
       margin-right: 4px;
     }
   }
@@ -50,9 +50,4 @@ export const Inner = styled.div`
       color: ${Colors.ORANGE5};
     }
   }
-
-  .bp4-button-group {
-    display: flex;
-    justify-content: center;
-  }
 `;
diff --git a/config-ui/src/routes/layout/styled.ts b/config-ui/src/routes/layout/styled.ts
index 00a2eacb6..f96441690 100644
--- a/config-ui/src/routes/layout/styled.ts
+++ b/config-ui/src/routes/layout/styled.ts
@@ -53,7 +53,7 @@ export const Sider = styled.div`
         background-color: rgba(167, 182, 194, 0.3);
       }
 
-      .bp4-icon {
+      .bp5-icon {
         svg {
           width: 12px;
           height: 12px;
@@ -138,7 +138,7 @@ export const Tips = styled.div`
     justify-content: center;
   }
 
-  .bp4-popover2-target {
+  .bp5-popover2-target {
     flex: 0 0 50px;
     width: 50px;
   }
@@ -148,7 +148,7 @@ export const SiderMenuItem = styled.div`
   display: flex;
   align-items: center;
 
-  & > .bp4-tag {
+  & > .bp5-tag {
     margin-left: 8px;
   }
 `;
diff --git a/config-ui/src/routes/pipeline/styled.ts b/config-ui/src/routes/pipeline/styled.ts
index bcda461dd..fd44eb5ee 100644
--- a/config-ui/src/routes/pipeline/styled.ts
+++ b/config-ui/src/routes/pipeline/styled.ts
@@ -194,7 +194,7 @@ export const Task = styled.div`
     flex: 0 0 80px;
     text-align: right;
 
-    .bp4-icon {
+    .bp5-icon {
       margin-top: 4px;
       cursor: pointer;
     }
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index 9b2c6a293..587e396f0 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -1443,7 +1443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -1501,28 +1501,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@blueprintjs/colors@npm:^4.1.19":
-  version: 4.1.19
-  resolution: "@blueprintjs/colors@npm:4.1.19"
-  checksum: 89ef5b1a4ae658d42c6023abab87230c6d611c0ac51dc0723bf8a3020c054306b21e500bb42c0daceef0cb143639f843313ff14ef8722f7ee31edd4df9f52008
+"@blueprintjs/colors@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@blueprintjs/colors@npm:5.0.2"
+  dependencies:
+    tslib: ~2.5.0
+  checksum: e9db67af8f81a5ee69c5cc21b01a6872daa92079655c643dadffedcd68966df62b3111bb168a8c85e187d2735bef137a0ef59ca9c9d2adf2f84642fe02999feb
   languageName: node
   linkType: hard
 
-"@blueprintjs/core@npm:^4.13.0, @blueprintjs/core@npm:^4.17.6":
-  version: 4.17.6
-  resolution: "@blueprintjs/core@npm:4.17.6"
+"@blueprintjs/core@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "@blueprintjs/core@npm:5.3.0"
   dependencies:
-    "@blueprintjs/colors": ^4.1.19
-    "@blueprintjs/icons": ^4.14.3
-    "@juggle/resize-observer": ^3.4.0
-    "@types/dom4": ^2.0.2
+    "@blueprintjs/colors": ^5.0.2
+    "@blueprintjs/icons": ^5.1.6
+    "@popperjs/core": ^2.11.7
     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.3.1
+    tslib: ~2.5.0
   peerDependencies:
     "@types/react": ^16.14.32 || 17 || 18
     react: ^16.8 || 17 || 18
@@ -1533,23 +1532,18 @@ __metadata:
   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
-  checksum: 3780a012d934e44ffa56cd5fd85661c88c09aa07f15480f6ec8e08075584918d019edbc2e0ff006281ffcc9c326993569b4ec089a027f16dbf7f5c52c1c15722
+  checksum: d06d5f2f81a11cf839560b9b7f9a2584c3e321058bc053d5e1b44043dc0fb280eede077f942b805387f18ca947064a1a47964847d7d12e4982adf4cc78b33eb2
   languageName: node
   linkType: hard
 
-"@blueprintjs/datetime2@npm:^0.9.6":
-  version: 0.9.23
-  resolution: "@blueprintjs/datetime2@npm:0.9.23"
+"@blueprintjs/datetime2@npm:^1.0.10":
+  version: 1.0.10
+  resolution: "@blueprintjs/datetime2@npm:1.0.10"
   dependencies:
-    "@blueprintjs/core": ^4.17.6
-    "@blueprintjs/datetime": ^4.4.25
-    "@blueprintjs/popover2": ^1.13.10
-    "@blueprintjs/select": ^4.9.10
-    classnames: ^2.3.1
+    "@blueprintjs/core": ^5.3.0
+    "@blueprintjs/datetime": ^5.0.10
     date-fns: ^2.28.0
-    date-fns-tz: ^1.3.7
-    lodash: ^4.17.21
-    tslib: ~2.3.1
+    tslib: ~2.5.0
   peerDependencies:
     "@types/react": ^16.14.32 || 17
     react: ^16.8 || 17
@@ -1557,18 +1551,23 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 396d872b57434dc5bfb808173789e6b7204a5f2e3ec874b07bdf58a7a688df65b2daecb9eaa108cde785d86718d7c79d85b7f87ae63797ef9f70aa6ae0a7b6c0
+  checksum: b52ce7c233f01b0b574ce4418673ca9b3e02959903206001206db5da3699c2d3cd746fd6f40a474b5441ce257d590ef4797570f48a72e1f8a563769c28765c56
   languageName: node
   linkType: hard
 
-"@blueprintjs/datetime@npm:^4.4.25":
-  version: 4.4.25
-  resolution: "@blueprintjs/datetime@npm:4.4.25"
+"@blueprintjs/datetime@npm:^5.0.10":
+  version: 5.0.10
+  resolution: "@blueprintjs/datetime@npm:5.0.10"
   dependencies:
-    "@blueprintjs/core": ^4.17.6
+    "@blueprintjs/core": ^5.3.0
+    "@blueprintjs/icons": ^5.1.6
+    "@blueprintjs/select": ^5.0.10
     classnames: ^2.3.1
+    date-fns: ^2.28.0
+    date-fns-tz: ^1.3.7
+    lodash: ^4.17.21
     react-day-picker: 7.4.9
-    tslib: ~2.3.1
+    tslib: ~2.5.0
   peerDependencies:
     "@types/react": ^16.14.32 || 17
     react: ^16.8 || 17
@@ -1576,32 +1575,35 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: c5124bb225bba3c08d2e633390ac41d7326bccdc9060370e71e7ffd7d22ae7ff55f4696a39a0b8d6eb2967a6e96818dd3a0120abdeb674e464ab9dfaf3aaab5d
+  checksum: 24ca793ea2bf649cc4fbcf10051ffe91dd38d9029a0d1b13e3f8652b81f84644db80a566096283e12cb9f584049a850f1480a67526e428a1bb265ab1832a81ee
   languageName: node
   linkType: hard
 
-"@blueprintjs/icons@npm:^4.14.3":
-  version: 4.14.3
-  resolution: "@blueprintjs/icons@npm:4.14.3"
+"@blueprintjs/icons@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "@blueprintjs/icons@npm:5.1.6"
   dependencies:
     change-case: ^4.1.2
     classnames: ^2.3.1
-    tslib: ~2.3.1
-  checksum: 7ca35dd041416c4d57173442a10d6fdd0302b1b03fba7d0907085f4227cef4c24bde288d0a3f398edb4695400ecf161f591e19c345b1d9fb241f13263240b3eb
+    tslib: ~2.5.0
+  peerDependencies:
+    "@types/react": ^16.14.32 || 17 || 18
+    react: ^16.8 || 17 || 18
+    react-dom: ^16.8 || 17 || 18
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: bd1487cbd9cb6719441303b7e3c4902b066af2983664998cc50c7908b4d6de0f1b58a675decc1efdf4150719afe2853c7cad451de64a189b2950c655abb04b9e
   languageName: node
   linkType: hard
 
-"@blueprintjs/popover2@npm:^1.10.2, @blueprintjs/popover2@npm:^1.13.10":
-  version: 1.13.10
-  resolution: "@blueprintjs/popover2@npm:1.13.10"
+"@blueprintjs/popover2@npm:^2.0.10":
+  version: 2.0.10
+  resolution: "@blueprintjs/popover2@npm:2.0.10"
   dependencies:
-    "@blueprintjs/core": ^4.17.6
-    "@juggle/resize-observer": ^3.4.0
-    "@popperjs/core": ^2.11.6
+    "@blueprintjs/core": ^5.3.0
     classnames: ^2.3.1
-    dom4: ^2.1.5
-    react-popper: ^2.3.0
-    tslib: ~2.3.1
+    tslib: ~2.5.0
   peerDependencies:
     "@types/react": ^16.14.32 || 17 || 18
     react: ^16.8 || 17 || 18
@@ -1609,18 +1611,18 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: f21c8dc37ed10f79ce6dba0c247207334f18955c667313ce3ec3d5be4e3041262e8a97d1ed6347f4f54218342f820b062697089f5641e9eeaf8fac5bd3f459c8
+  checksum: 39515d56ce6b8a828e39d2301468bfea172fa1521fafe4baa40068443fdf53611ef8ada80b50500d793da129f610ece6dd1429aa3588e03d283f093c78dcde1c
   languageName: node
   linkType: hard
 
-"@blueprintjs/select@npm:^4.8.12, @blueprintjs/select@npm:^4.9.10":
-  version: 4.9.10
-  resolution: "@blueprintjs/select@npm:4.9.10"
+"@blueprintjs/select@npm:^5.0.10":
+  version: 5.0.10
+  resolution: "@blueprintjs/select@npm:5.0.10"
   dependencies:
-    "@blueprintjs/core": ^4.17.6
-    "@blueprintjs/popover2": ^1.13.10
+    "@blueprintjs/core": ^5.3.0
+    "@blueprintjs/icons": ^5.1.6
     classnames: ^2.3.1
-    tslib: ~2.3.1
+    tslib: ~2.5.0
   peerDependencies:
     "@types/react": ^16.14.32 || 17 || 18
     react: ^16.8 || 17 || 18
@@ -1628,7 +1630,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: f1c2fd39a50fc9f087d984a6291be971fed5d4e4e4ca87bfcf63bca82baccd90757ba437e76c140e5119b4afd97d3c38de7683039bbd5173c59f3cc29cf3c591
+  checksum: 6e6090de40e1eb74fcccc0746dda6bd2e75ada59ca39c64bd6877d132711feb0a474f364e42e03d8058f568b4ea35c4d654648ffbd4a5e09e73819c981cf5e35
   languageName: node
   linkType: hard
 
@@ -1890,19 +1892,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypnosphi/create-react-context@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "@hypnosphi/create-react-context@npm:0.3.1"
-  dependencies:
-    gud: ^1.0.0
-    warning: ^4.0.3
-  peerDependencies:
-    prop-types: ^15.0.0
-    react: ">=0.14.0"
-  checksum: d2f069a562e138057aa067e1483e28cea3193bbacd33ca9528131f31e656939cfeb552af760b3be437d3a8074315a8854fc6d5d89878e2746618ad930c817122
-  languageName: node
-  linkType: hard
-
 "@jridgewell/gen-mapping@npm:^0.1.0":
   version: 0.1.1
   resolution: "@jridgewell/gen-mapping@npm:0.1.1"
@@ -1955,13 +1944,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@juggle/resize-observer@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "@juggle/resize-observer@npm:3.4.0"
-  checksum: 2505028c05cc2e17639fcad06218b1c4b60f932a4ebb4b41ab546ef8c157031ae377e3f560903801f6d01706dbefd4943b6c4704bf19ed86dfa1c62f1473a570
-  languageName: node
-  linkType: hard
-
 "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
   version: 5.1.1-v1
   resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
@@ -2018,10 +2000,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.6":
-  version: 2.11.6
-  resolution: "@popperjs/core@npm:2.11.6"
-  checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0
+"@popperjs/core@npm:^2.11.7":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
   languageName: node
   linkType: hard
 
@@ -2046,13 +2028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/dom4@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@types/dom4@npm:2.0.2"
-  checksum: 33af62348979c54dc227ad6c943c374a5e0e4af17f6d7d18957662c1247242ec8e0718a43a62bf4288de6d5e6e59f8e1801a499e3aa2e3899bf116e5b3170805
-  languageName: node
-  linkType: hard
-
 "@types/file-saver@npm:^2.0.5":
   version: 2.0.5
   resolution: "@types/file-saver@npm:2.0.5"
@@ -3037,10 +3012,10 @@ __metadata:
   resolution: "config-ui@workspace:."
   dependencies:
     "@ahooksjs/use-url-state": ^3.5.1
-    "@blueprintjs/core": ^4.13.0
-    "@blueprintjs/datetime2": ^0.9.6
-    "@blueprintjs/popover2": ^1.10.2
-    "@blueprintjs/select": ^4.8.12
+    "@blueprintjs/core": ^5.3.0
+    "@blueprintjs/datetime2": ^1.0.10
+    "@blueprintjs/popover2": ^2.0.10
+    "@blueprintjs/select": ^5.0.10
     "@types/file-saver": ^2.0.5
     "@types/node": ^18.15.1
     "@types/react": ^18.0.24
@@ -3260,20 +3235,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "deep-equal@npm:1.1.1"
-  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
-  checksum: f92686f2c5bcdf714a75a5fa7a9e47cb374a8ec9307e717b8d1ce61f56a75aaebf5619c2a12b8087a705b5a2f60d0292c35f8b58cb1f72e3268a3a15cab9f78d
-  languageName: node
-  linkType: hard
-
 "deep-equal@npm:^2.0.5":
   version: 2.2.0
   resolution: "deep-equal@npm:2.2.0"
@@ -3367,13 +3328,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom4@npm:^2.1.5":
-  version: 2.1.6
-  resolution: "dom4@npm:2.1.6"
-  checksum: c15ad56afbd1a02a20c0c40215f45a6a28d4fc4740b39359c8f64c693dc5ed4db2944f40b7ce3b7072e87a87986d0c4d355e0abe0f2106648b91e3d19ad696b0
-  languageName: node
-  linkType: hard
-
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -4339,13 +4293,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gud@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "gud@npm:1.0.0"
-  checksum: 3e2eb37cf794364077c18f036d6aa259c821c7fd188f2b7935cb00d589d82a41e0ebb1be809e1a93679417f62f1ad0513e745c3cf5329596e489aef8c5e5feae
-  languageName: node
-  linkType: hard
-
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -4576,7 +4523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
+"is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -4722,7 +4669,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.4, is-regex@npm:^1.1.4":
+"is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
   dependencies:
@@ -5456,7 +5403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-is@npm:^1.0.1, object-is@npm:^1.1.5":
+"object-is@npm:^1.1.5":
   version: 1.1.5
   resolution: "object-is@npm:1.1.5"
   dependencies:
@@ -5712,13 +5659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"popper.js@npm:^1.14.4, popper.js@npm:^1.16.1":
-  version: 1.16.1
-  resolution: "popper.js@npm:1.16.1"
-  checksum: c56ae5001ec50a77ee297a8061a0221d99d25c7348d2e6bcd3e45a0d0f32a1fd81bca29d46cb0d4bdf13efb77685bd6a0ce93f9eb3c608311a461f945fffedbe
-  languageName: node
-  linkType: hard
-
 "postcss-value-parser@npm:^4.0.2":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -5779,7 +5719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -5891,23 +5831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-popper@npm:^1.3.11":
-  version: 1.3.11
-  resolution: "react-popper@npm:1.3.11"
-  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
-  checksum: a0f5994f5799f1c7364498f74df123dd2561fff4ae834b10fdcca74d9a8e159b523ed1f0708db33bad606933ab4f0d5ce9c90e48cbb671bf30016c890f3c7ea4
-  languageName: node
-  linkType: hard
-
 "react-popper@npm:^2.3.0":
   version: 2.3.0
   resolution: "react-popper@npm:2.3.0"
@@ -6021,7 +5944,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.3":
+"regexp.prototype.flags@npm:^1.4.3":
   version: 1.4.3
   resolution: "regexp.prototype.flags@npm:1.4.3"
   dependencies:
@@ -6712,10 +6635,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:~2.3.1":
-  version: 2.3.1
-  resolution: "tslib@npm:2.3.1"
-  checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9
+"tslib@npm:~2.5.0":
+  version: 2.5.3
+  resolution: "tslib@npm:2.5.3"
+  checksum: 88902b309afaf83259131c1e13da1dceb0ad1682a213143a1346a649143924d78cf3760c448b84d796938fd76127183894f8d85cbb3bf9c4fddbfcc140c0003c
   languageName: node
   linkType: hard
 
@@ -6764,13 +6687,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-styles@npm:^0.0.7":
-  version: 0.0.7
-  resolution: "typed-styles@npm:0.0.7"
-  checksum: 36a6ad6bee008c15ddb8c2425eaf9aee37d2841985b4c44406ea4cf57080a9c30b6f9f3feb842ac952354733ac53299ee44f68d83f734486e8344d413f8c8c0d
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^4.9.4":
   version: 4.9.5
   resolution: "typescript@npm:4.9.5"
@@ -6938,7 +6854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2, warning@npm:^4.0.3":
+"warning@npm:^4.0.2":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies: