This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 20473f619 feat(config-ui): upgrade the core ui library (#3905)
20473f619 is described below
commit 20473f619bbac99bf56d5242f44f2aeb2c9d3c49
Author: 青湛 <[email protected]>
AuthorDate: Mon Dec 12 10:18:43 2022 +0800
feat(config-ui): upgrade the core ui library (#3905)
* feat(config-ui): upgrade the core ui library
* feat(config-ui): adjust the style for base-layout
* refactor(config-ui): remove old breadcrumb
* fix(config-ui): missed header for index.css
---
config-ui/package-lock.json | 184 +++++++++------------
config-ui/package.json | 6 +-
.../src/components/pipelines/TaskActivity.jsx | 2 +-
.../src/{components/Breadcrumbs.jsx => index.css} | 34 +---
config-ui/src/index.js | 2 +
config-ui/src/layouts/base/styled.ts | 2 +-
config-ui/src/layouts/base/use-menu.ts | 2 +-
.../src/pages/blueprints/blueprint-detail.jsx | 2 +-
config-ui/src/pages/blueprints/index.jsx | 7 -
.../pages/configure/connections/AddConnection.jsx | 18 --
.../configure/connections/ConfigureConnection.jsx | 20 ---
.../src/pages/configure/integration/index.jsx | 14 +-
.../src/pages/configure/integration/manage.jsx | 15 +-
.../pages/connections/incoming-webhook/index.jsx | 14 --
config-ui/src/styles/app.scss | 5 -
config-ui/src/styles/common.scss | 5 -
config-ui/src/styles/connections.scss | 34 ++--
config-ui/src/styles/integration.scss | 12 +-
config-ui/src/styles/libraries/blueprint.scss | 2 +-
19 files changed, 116 insertions(+), 264 deletions(-)
diff --git a/config-ui/package-lock.json b/config-ui/package-lock.json
index 750b1d06f..e96259041 100644
--- a/config-ui/package-lock.json
+++ b/config-ui/package-lock.json
@@ -1478,44 +1478,78 @@
"dev": true
},
"@blueprintjs/colors": {
- "version": "4.0.0-alpha.1",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.0.0-alpha.1.tgz";,
- "integrity":
"sha512-i95xW/cAIijJAMIBDrXw1WLbGVXVaRDRG1Ga0CxOtMVwL20zvdXlQj7EMqhkgVEJo9LaKNIDliPI+jsh7h5Lag=="
+ "version": "4.1.10",
+ "resolved":
"https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.1.10.tgz";,
+ "integrity":
"sha512-p1rgfijpZi+r2xskyRi3uF8DRq08rb26u9Gymi0p4ZNZq/iLJQ1Fj1jfT8yh2yc6eCfs8GlH6iDNdU387wEK3w=="
},
"@blueprintjs/core": {
- "version": "3.51.3",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/core/-/core-3.51.3.tgz";,
- "integrity":
"sha512-Z3xGWBMBuboKFx19uxWNAUjITsCmpm+594R/KEAM578uT6yoydT6s5S7N12APAsFe8w3H1Yu2hbWHlHTvRfOhA==",
- "requires": {
- "@blueprintjs/colors": "^4.0.0-alpha.1",
- "@blueprintjs/icons": "^3.31.0",
- "@types/dom4": "^2.0.1",
- "classnames": "^2.2",
+ "version": "4.13.0",
+ "resolved":
"https://registry.npmjs.org/@blueprintjs/core/-/core-4.13.0.tgz";,
+ "integrity":
"sha512-LGpSxYf94CFJirOzsPyai0JaJcS2csKEhpyfrLnMb8ZrSPjMNyNx/5KZTKoZ0f7/GO7hrcuzpMBOkxQxcrVExA==",
+ "requires": {
+ "@blueprintjs/colors": "^4.1.10",
+ "@blueprintjs/icons": "^4.11.0",
+ "@juggle/resize-observer": "^3.4.0",
+ "@types/dom4": "^2.0.2",
+ "classnames": "^2.3.1",
"dom4": "^2.1.5",
"normalize.css": "^8.0.1",
"popper.js": "^1.16.1",
- "react-lifecycles-compat": "^3.0.4",
- "react-popper": "^1.3.7",
- "react-transition-group": "^2.9.0",
- "resize-observer-polyfill": "^1.5.1",
- "tslib": "~1.13.0"
+ "react-popper": "^1.3.11",
+ "react-transition-group": "^4.4.5",
+ "tslib": "~2.3.1"
+ },
+ "dependencies": {
+ "dom-helpers": {
+ "version": "5.2.1",
+ "resolved":
"https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz";,
+ "integrity":
"sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "requires": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
+ "react-transition-group": {
+ "version": "4.4.5",
+ "resolved":
"https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz";,
+ "integrity":
"sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ }
+ },
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
+ "integrity":
"sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
}
},
"@blueprintjs/icons": {
- "version": "3.31.0",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.31.0.tgz";,
- "integrity":
"sha512-6pXhHC8zEvoDKN5KNsIHNuCRKsemmRbXNv1jweB95VaFzR1M+Mik+Qi+13Wd+VtZrzes2ZcWttIeyuK91NoLCw==",
+ "version": "4.11.0",
+ "resolved":
"https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.11.0.tgz";,
+ "integrity":
"sha512-RkWwJb75hVg/OXh5QqWbKQxeAUY0LNds3fj/gCkneIyKKURNRk4yxIcdoUNBBYvINHp2BR53SRug8QA5bdFGiA==",
"requires": {
- "classnames": "^2.2",
- "tslib": "~1.13.0"
+ "change-case": "^4.1.2",
+ "classnames": "^2.3.1",
+ "tslib": "~2.3.1"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
+ "integrity":
"sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
}
},
"@blueprintjs/popover2": {
- "version": "1.10.1",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.10.1.tgz";,
- "integrity":
"sha512-WWKCvwvPoDUeAXUfsWg5aqbSFI09H+EGbsKZ8CVyRLHC3K0j6k4ljI6ic9iTiDUXLD/0TKGFCd1mOy9GOGaONg==",
+ "version": "1.10.2",
+ "resolved":
"https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.10.2.tgz";,
+ "integrity":
"sha512-+7qBKpiN10tfRE1Rz2RKTzNoweALQ4nlAWTmXjK+gEieEN7esXrhQ4kiK6qY3bRBb4Yi7cJ4MQ3PpJ1E4s/2RQ==",
"requires": {
- "@blueprintjs/core": "^4.12.0",
+ "@blueprintjs/core": "^4.13.0",
"@juggle/resize-observer": "^3.4.0",
"@popperjs/core": "^2.11.6",
"classnames": "^2.3.1",
@@ -1524,64 +1558,6 @@
"tslib": "~2.3.1"
},
"dependencies": {
- "@blueprintjs/colors": {
- "version": "4.1.9",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.1.9.tgz";,
- "integrity":
"sha512-AxBKGwHS9Ojs7YPRMiwDlUEnSG36P/Hi0C3i4/smPmzUzqFGp1ZDqTmBBM15XoUKIuYfmpNATqIdKgNx2OzOkg=="
- },
- "@blueprintjs/core": {
- "version": "4.12.0",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/core/-/core-4.12.0.tgz";,
- "integrity":
"sha512-obbtEMzKOTwB56vlw4A8+9lvYwtB1mK4S8/b5Dy7WqdJ66L1WfcbIWcGxc2jWsGxanvMIzi6Pd+0XXuRRNkmhQ==",
- "requires": {
- "@blueprintjs/colors": "^4.1.9",
- "@blueprintjs/icons": "^4.10.1",
- "@juggle/resize-observer": "^3.4.0",
- "@types/dom4": "^2.0.2",
- "classnames": "^2.3.1",
- "dom4": "^2.1.5",
- "normalize.css": "^8.0.1",
- "popper.js": "^1.16.1",
- "react-popper": "^1.3.11",
- "react-transition-group": "^4.4.5",
- "tslib": "~2.3.1"
- },
- "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"
- }
- }
- }
- },
- "@blueprintjs/icons": {
- "version": "4.10.1",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.10.1.tgz";,
- "integrity":
"sha512-VkEa+tzi2wZF51D2PmuKVl3krEuAudvpR8ziDQiXBbq9DPlN3Y+HrCJQzZ8LX7HtSbDp7v8k6f5/1T1ubH96SQ==",
- "requires": {
- "change-case": "^4.1.2",
- "classnames": "^2.3.1",
- "tslib": "~2.3.1"
- }
- },
- "dom-helpers": {
- "version": "5.2.1",
- "resolved":
"https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz";,
- "integrity":
"sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
- "requires": {
- "@babel/runtime": "^7.8.7",
- "csstype": "^3.0.2"
- }
- },
"react-popper": {
"version": "2.3.0",
"resolved":
"https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz";,
@@ -1591,17 +1567,6 @@
"warning": "^4.0.2"
}
},
- "react-transition-group": {
- "version": "4.4.5",
- "resolved":
"https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz";,
- "integrity":
"sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
- "requires": {
- "@babel/runtime": "^7.5.5",
- "dom-helpers": "^5.0.1",
- "loose-envify": "^1.4.0",
- "prop-types": "^15.6.2"
- }
- },
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
@@ -1610,13 +1575,21 @@
}
},
"@blueprintjs/select": {
- "version": "3.18.10",
- "resolved":
"https://registry.npmjs.org/@blueprintjs/select/-/select-3.18.10.tgz";,
- "integrity":
"sha512-0G3ZHTGi+FJeXdE7nn5UPxZyEWgRR/jE+LckHiq9Aqmh62JweLUDwMmofBP9o72k+zvMVtTyn78QLAxfHJN5Xw==",
+ "version": "4.8.12",
+ "resolved":
"https://registry.npmjs.org/@blueprintjs/select/-/select-4.8.12.tgz";,
+ "integrity":
"sha512-0ahf8zpvyQJp1a6PChpy8rl8RF24/YYbJSnDdMxesERER0iOprQNt8+/BQDWUz+PYpeWz+6lIgHe8TJBvxHQqw==",
"requires": {
- "@blueprintjs/core": "^3.51.3",
- "classnames": "^2.2",
- "tslib": "~1.13.0"
+ "@blueprintjs/core": "^4.13.0",
+ "@blueprintjs/popover2": "^1.10.2",
+ "classnames": "^2.3.1",
+ "tslib": "~2.3.1"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
+ "integrity":
"sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
}
},
"@cypress/request": {
@@ -5319,9 +5292,9 @@
}
},
"classnames": {
- "version": "2.3.1",
- "resolved":
"https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz";,
- "integrity":
"sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+ "version": "2.3.2",
+ "resolved":
"https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz";,
+ "integrity":
"sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clean-css": {
"version": "4.2.4",
@@ -16713,11 +16686,6 @@
"integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=",
"dev": true
},
- "resize-observer-polyfill": {
- "version": "1.5.1",
- "resolved":
"https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz";,
- "integrity":
"sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
- },
"resolve": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz";,
diff --git a/config-ui/package.json b/config-ui/package.json
index d6cd4a282..ad443bf1c 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -13,9 +13,9 @@
},
"dependencies": {
"@babel/eslint-parser": "^7.18.2",
- "@blueprintjs/core": "^3.49.1",
- "@blueprintjs/popover2": "^1.4.1",
- "@blueprintjs/select": "^3.18.10",
+ "@blueprintjs/core": "^4.13.0",
+ "@blueprintjs/popover2": "^1.10.2",
+ "@blueprintjs/select": "^4.8.12",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fontsource/inter": "^4.5.11",
diff --git a/config-ui/src/components/pipelines/TaskActivity.jsx
b/config-ui/src/components/pipelines/TaskActivity.jsx
index 57d2438c7..906dd8efb 100644
--- a/config-ui/src/components/pipelines/TaskActivity.jsx
+++ b/config-ui/src/components/pipelines/TaskActivity.jsx
@@ -468,7 +468,7 @@ const TaskActivity = (props) => {
</span>
</h2>
<table
- className='bp3-html-table striped bordered'
+ className='bp4-html-table striped bordered'
style={{ width: '100%' }}
>
<thead>
diff --git a/config-ui/src/components/Breadcrumbs.jsx b/config-ui/src/index.css
similarity index 52%
rename from config-ui/src/components/Breadcrumbs.jsx
rename to config-ui/src/index.css
index cb05ed574..c42a38d70 100644
--- a/config-ui/src/components/Breadcrumbs.jsx
+++ b/config-ui/src/index.css
@@ -15,33 +15,9 @@
* limitations under the License.
*
*/
-import React from 'react'
-import { Breadcrumbs, Breadcrumb, Icon, Colors } from '@blueprintjs/core'
-import '@/styles/breadcrumbs.scss'
-const AppCrumbs = (props) => {
- const { items } = props
-
- const renderBreadcrumb = ({ text, ...restProps }) => {
- return <Breadcrumb {...restProps}>{text}</Breadcrumb>
- }
-
- const renderCurrentBreadcrumb = ({ text, ...restProps }) => {
- return (
- <Breadcrumb {...restProps}>
- {text} <Icon icon='symbol-circle' size={4} color={Colors.GREEN3} />
- </Breadcrumb>
- )
- }
-
- return (
- <Breadcrumbs
- breadcrumbRenderer={renderBreadcrumb}
- currentBreadcrumbRenderer={renderCurrentBreadcrumb}
- items={items}
- icon='icon-slash'
- />
- )
-}
-
-export default AppCrumbs
+@import '~normalize.css';
+@import '~@blueprintjs/core/lib/css/blueprint.css';
+@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';
+@import '~@blueprintjs/select/lib/css/blueprint-select.css';
+@import '~@blueprintjs/popover2/lib/css/blueprint-popover2.css';
diff --git a/config-ui/src/index.js b/config-ui/src/index.js
index 83f0e9df3..a4c69573d 100644
--- a/config-ui/src/index.js
+++ b/config-ui/src/index.js
@@ -22,6 +22,8 @@ import App from './App'
import { UIContextProvider } from '@/store/UIContext'
import { IntegrationsContextProvider } from '@/store/integrations-context'
+import './index.css'
+
ReactDOM.render(
<UIContextProvider>
<IntegrationsContextProvider>
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index 481117ac6..bc1c367b7 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -115,7 +115,7 @@ export const Header = styled(Navbar)`
export const Content = styled.div`
flex: auto;
margin: 24px auto 0;
- max-width: 820px;
+ max-width: 900px;
width: 100%;
`
diff --git a/config-ui/src/layouts/base/use-menu.ts
b/config-ui/src/layouts/base/use-menu.ts
index 540baf8a5..be448e4db 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -67,7 +67,7 @@ export const useMenu = () => {
{
key: 'blueprint',
title: 'Blueprints',
- icon: 'home',
+ icon: 'timeline-events',
path: '/blueprints',
children: [
{
diff --git a/config-ui/src/pages/blueprints/blueprint-detail.jsx
b/config-ui/src/pages/blueprints/blueprint-detail.jsx
index 72929b968..e7ca7f000 100644
--- a/config-ui/src/pages/blueprints/blueprint-detail.jsx
+++ b/config-ui/src/pages/blueprints/blueprint-detail.jsx
@@ -683,7 +683,7 @@ const BlueprintDetail = (props) => {
style={{ padding: '0', marginBottom: '8px' }}
>
<table
- className='bp3-html-table bp3-html-table historical-runs-table'
+ className='bp4-html-table bp4-html-table historical-runs-table'
style={{ width: '100%' }}
>
<thead>
diff --git a/config-ui/src/pages/blueprints/index.jsx
b/config-ui/src/pages/blueprints/index.jsx
index 8fe90c8fb..9c9639f3c 100644
--- a/config-ui/src/pages/blueprints/index.jsx
+++ b/config-ui/src/pages/blueprints/index.jsx
@@ -339,13 +339,6 @@ const Blueprints = (props) => {
return (
<main className='main'>
- {/* <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- { href: '/pipelines', icon: false, text: 'Pipelines' },
- { href: '/blueprints', icon: false, text: 'Pipeline
Blueprints', current: true },
- ]}
- /> */}
<div className='headlineContainer'>
<div style={{ display: 'flex' }}>
<div>
diff --git a/config-ui/src/pages/configure/connections/AddConnection.jsx
b/config-ui/src/pages/configure/connections/AddConnection.jsx
index b1016d683..4144d44b3 100644
--- a/config-ui/src/pages/configure/connections/AddConnection.jsx
+++ b/config-ui/src/pages/configure/connections/AddConnection.jsx
@@ -18,7 +18,6 @@
import React, { useEffect, useState } from 'react'
import { Link, useHistory, useParams } from 'react-router-dom'
import { Icon } from '@blueprintjs/core'
-import AppCrumbs from '@/components/Breadcrumbs'
import ConnectionForm from '@/pages/configure/connections/ConnectionForm'
// import { integrationsData } from '@/data/integrations'
// import {
@@ -147,23 +146,6 @@ export default function AddConnection() {
return (
<main className='main'>
- <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- { href: '/integrations', icon: false, text: 'Connections' },
- {
- href: `/integrations/${activeProvider?.id}`,
- icon: false,
- text: `${activeProvider?.name}`
- },
- {
- href: `/connections/add/${activeProvider?.id}`,
- icon: false,
- text: 'Add Connection',
- current: true
- }
- ]}
- />
<div style={{ width: '100%' }}>
<Link
style={{ float: 'right', marginLeft: '10px', color: '#777777' }}
diff --git a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
index 5b9919133..3daa995e0 100644
--- a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
+++ b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx
@@ -18,7 +18,6 @@
import React, { useEffect, useState } from 'react'
import { Link, useHistory, useParams } from 'react-router-dom'
import { Button, Card, Elevation, Icon, Intent } from '@blueprintjs/core'
-import AppCrumbs from '@/components/Breadcrumbs'
import ContentLoader from '@/components/loaders/ContentLoader'
import useIntegrations from '@/hooks/useIntegrations'
import useConnectionManager from '@/hooks/useConnectionManager'
@@ -181,25 +180,6 @@ export default function ConfigureConnection() {
return (
<main className='main'>
- <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- { href: '/integrations', icon: false, text: 'Connections' },
- {
- href: `/integrations/${activeProvider?.id}`,
- icon: false,
- text: `${activeProvider?.name}`
- },
- {
- href:
`/connections/configure/${activeProvider?.id}/${activeConnection?.id}`,
- icon: false,
- text: `${
- activeConnection ? activeConnection.name : 'Configure'
- } Settings`,
- current: true
- }
- ]}
- />
<div className='configureConnection' style={{ width: '100%' }}>
{!isLoadingConnection && (
<Link
diff --git a/config-ui/src/pages/configure/integration/index.jsx
b/config-ui/src/pages/configure/integration/index.jsx
index cdfb1a636..f9091a024 100644
--- a/config-ui/src/pages/configure/integration/index.jsx
+++ b/config-ui/src/pages/configure/integration/index.jsx
@@ -18,7 +18,6 @@
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Colors, Icon } from '@blueprintjs/core'
-import AppCrumbs from '@/components/Breadcrumbs'
// @todo: replace with Integrations Hook
// import { integrationsData } from '@/data/integrations'
import useIntegrations from '@/hooks/useIntegrations'
@@ -57,17 +56,6 @@ export default function Integration() {
return (
<main className='main'>
- <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- {
- href: '/integrations',
- icon: false,
- text: 'Connections',
- current: true
- }
- ]}
- />
<div className='headlineContainer'>
<h1>Data Connections</h1>
<p className='page-description'>
@@ -132,7 +120,7 @@ export default function Integration() {
<div className='integrationProviders'>
<div
className='iProvider'
- style={{ width: 130 }}
+ style={{ width: 140 }}
onClick={() => history.push('/connections/incoming-webhook')}
>
<div className='providerIcon'>
diff --git a/config-ui/src/pages/configure/integration/manage.jsx
b/config-ui/src/pages/configure/integration/manage.jsx
index 5db046245..1bb703503 100644
--- a/config-ui/src/pages/configure/integration/manage.jsx
+++ b/config-ui/src/pages/configure/integration/manage.jsx
@@ -28,7 +28,6 @@ import {
Intent,
Icon
} from '@blueprintjs/core'
-import AppCrumbs from '@/components/Breadcrumbs'
import { ToastNotification } from '@/components/Toast'
import useIntegrations from '@/hooks/useIntegrations'
import useConnectionManager from '@/hooks/useConnectionManager'
@@ -178,18 +177,6 @@ export default function ManageIntegration() {
return (
<main className='main'>
- <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- { href: '/integrations', icon: false, text: 'Connections' },
- {
- href: `/integrations/${activeProvider?.id}`,
- icon: false,
- text: `${activeProvider?.name}`,
- current: true
- }
- ]}
- />
<div className='headlineContainer'>
<Link
style={{ float: 'right', marginLeft: '10px', color: '#777777' }}
@@ -327,7 +314,7 @@ export default function ManageIntegration() {
style={{ width: '100%', padding: '2px' }}
>
<table
- className='bp3-html-table bp3-html-table-bordered
connections-table'
+ className='bp4-html-table bp4-html-table-bordered
connections-table'
style={{ width: '100%' }}
>
<thead>
diff --git a/config-ui/src/pages/connections/incoming-webhook/index.jsx
b/config-ui/src/pages/connections/incoming-webhook/index.jsx
index 3c468df2c..6226480c2 100644
--- a/config-ui/src/pages/connections/incoming-webhook/index.jsx
+++ b/config-ui/src/pages/connections/incoming-webhook/index.jsx
@@ -20,7 +20,6 @@ import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { Icon, Button, Intent } from '@blueprintjs/core'
-import AppCrumbs from '@/components/Breadcrumbs'
import { useWebhookManager } from '@/hooks/useWebhookManager'
import { ReactComponent as WebHookProviderIcon } from
'@/images/integrations/incoming-webhook.svg'
import { ReactComponent as EditIcon } from '@/images/icons/setting-con.svg'
@@ -68,19 +67,6 @@ export const IncomingWebhook = () => {
return (
<>
<div className='main'>
- <AppCrumbs
- items={[
- { href: '/', icon: false, text: 'Dashboard' },
- // use /connections replace here
- { href: '/integrations', icon: false, text: 'Connections' },
- {
- href: '/connections/incoming-webhook',
- icon: false,
- text: 'Incoming Webhook',
- current: true
- }
- ]}
- />
<div className='headlineContainer'>
<div
style={{
diff --git a/config-ui/src/styles/app.scss b/config-ui/src/styles/app.scss
index 8cbedf327..440a4281c 100644
--- a/config-ui/src/styles/app.scss
+++ b/config-ui/src/styles/app.scss
@@ -15,11 +15,6 @@
// Load Fonts
@import '@/styles/fonts.scss';
-// Load Core BlueprintJS SCSS Modules
-@import '@blueprintjs/core/src/blueprint.scss';
-@import '~@blueprintjs/popover2/lib/css/blueprint-popover2.css';
-// App-level "blueprint" overrides
-@import '@/styles/libraries/blueprint.scss';
// Global App styles
@import '@/styles/globals.scss';
// Shared & Common styles
diff --git a/config-ui/src/styles/common.scss b/config-ui/src/styles/common.scss
index 068920f11..b6fa9dd94 100644
--- a/config-ui/src/styles/common.scss
+++ b/config-ui/src/styles/common.scss
@@ -13,11 +13,6 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-.main {
- margin: 0 auto;
- width: 750px;
-}
-
.description {
display: block;
margin-bottom: 1.6rem;
diff --git a/config-ui/src/styles/connections.scss
b/config-ui/src/styles/connections.scss
index da1d9ef7d..11e60d230 100644
--- a/config-ui/src/styles/connections.scss
+++ b/config-ui/src/styles/connections.scss
@@ -18,46 +18,46 @@
max-width: 100%;
}
- .bp3-form-group {
+ .bp4-form-group {
display: flex;
max-width: none;
margin-bottom: 10px;
- &.bp3-inline {
- .bp3-form-content {
- .bp3-input-group, .connection-tokens-personal-group {
+ &.bp4-inline {
+ .bp4-form-content {
+ .bp4-input-group, .connection-tokens-personal-group {
margin-left: 0.75rem;
}
.connection-tokens-personal-group {
- .bp3-input-group {
+ .bp4-input-group {
margin-left: 0;
}
}
}
}
- .bp3-form-content {
+ .bp4-form-content {
width: 100%;
// @todo REVISE THESE RULES!
max-width: 100%;
// min-width: 600px;
display: flex;
- .bp3-label {}
+ .bp4-label {}
}
- .bp3-input-group {
+ .bp4-input-group {
display: flex;
// width: 440px;
// min-width: 440px;
// max-width: 440px;
// max-width: 600px;
- .bp3-input {
+ .bp4-input {
flex: 1;
}
&.connection-name-input {
- .bp3-input {
+ .bp4-input {
&:read-only {
background-color: #ffffee;
font-weight: bold;
@@ -71,7 +71,7 @@
}
}
- .bp3-form-helper-text {
+ .bp4-form-helper-text {
margin-top: 2px;
margin-right: 10px;
margin-left: 5px;
@@ -101,8 +101,8 @@
}
.configureConnection {
- .bp3-form-group {
- .bp3-form-content {
+ .bp4-form-group {
+ .bp4-form-content {
// max-width: 80%;
}
}
@@ -154,7 +154,7 @@
}
}
-.bp3-popover-wrapper {
+.bp4-popover-wrapper {
&.popover-generate-token, &.popover-delete-connection,
&.trigger-delete-connection {
width: auto;
}
@@ -173,19 +173,19 @@
font-size: 17px;
}
- .bp3-popover-content {
+ .bp4-popover-content {
white-space: normal;
}
}
&.trigger-delete-connection {
- .bp3-popover-target {
+ .bp4-popover-target {
width: auto;
}
}
}
-.app-error-card.bp3-elevation-0 {
+.app-error-card.bp4-elevation-0 {
box-shadow: none;
}
diff --git a/config-ui/src/styles/integration.scss
b/config-ui/src/styles/integration.scss
index bb6a3dffc..7069fa5a7 100644
--- a/config-ui/src/styles/integration.scss
+++ b/config-ui/src/styles/integration.scss
@@ -84,12 +84,12 @@
&:hover {
color: #111111;
- >.bp3-icon {
+ >.bp4-icon {
opacity: 1.0;
}
}
- >.bp3-icon {
+ >.bp4-icon {
margin-right: 5px;
margin-bottom: 2px;
opacity: 0.5;
@@ -118,14 +118,14 @@ table.connections-table {
}
}
-.bp3-button.bp3-intent-primary {
+.bp4-button.bp4-intent-primary {
// background-color: #E8471C;
&:hover {
// background-color: #ff6a42;
}
}
-.bp3-breadcrumbs-collapsed::before {
+.bp4-breadcrumbs-collapsed::before {
background-color: transparent;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAABaoSURBVHic7d15rG1XQQbw73UgLcKjQyjWoralEwXbvs5zH8VAAkjEAUkU4hAkAQUSohiiBMQENUTFKBGktWr0j5ahNKCggJhCCFKxpEQp0glCwc6vfWVo+971j30vve/xhnPuOXuvvfb6/ZKVEko4a+1zz/q+s8/Z+yQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMLdNpScAFHFwkiet/uftSR4tOBcAoCdPT/K6JNcluT3JziQrq2Pn6n
[...]
background-position: center center;
@@ -138,7 +138,7 @@ table.connections-table {
max-width: 860px;
margin-right: auto;
- .bp3-input-group {
+ .bp4-input-group {
&.connection-name-input, &.username-input, &.password-input {
min-width: 320px;
width: auto;
@@ -147,7 +147,7 @@ table.connections-table {
}
}
-.bp3-input-group {
+.bp4-input-group {
&.invalid-field {
+ label { font-weight: bold }
> input, > textarea {
diff --git a/config-ui/src/styles/libraries/blueprint.scss
b/config-ui/src/styles/libraries/blueprint.scss
index f00d85bf7..b190d41b2 100644
--- a/config-ui/src/styles/libraries/blueprint.scss
+++ b/config-ui/src/styles/libraries/blueprint.scss
@@ -89,7 +89,7 @@
max-width: 600px;
}
-.bp3-running-text table, table.bp3-html-table {
+.bp3-running-text table, table.bp4-html-table {
font-size: 1.0em;
}
