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 8fb11549 refactor(config-ui): adjust the base layout (#3842)
8fb11549 is described below
commit 8fb11549010462fa47c57e46863e077801429e9a
Author: 青湛 <[email protected]>
AuthorDate: Fri Dec 2 12:44:20 2022 +0800
refactor(config-ui): adjust the base layout (#3842)
* refactor(config-ui): adjust the style for base-layout
* refactor(config-ui): rename Data Connections to Connections for menu
* fix(config-ui): remove styles that affect structure
* chore(config-ui): remove console.log from useIntegrations
---
config-ui/src/hooks/useIntegrations.jsx | 69 ----------------------
config-ui/src/layouts/base/styled.ts | 18 ++++--
config-ui/src/layouts/base/use-menu.ts | 4 +-
.../pages/connections/incoming-webhook/index.jsx | 4 +-
config-ui/src/styles/common.scss | 13 ----
5 files changed, 16 insertions(+), 92 deletions(-)
diff --git a/config-ui/src/hooks/useIntegrations.jsx
b/config-ui/src/hooks/useIntegrations.jsx
index 6b3e6645..633a1e7c 100644
--- a/config-ui/src/hooks/useIntegrations.jsx
+++ b/config-ui/src/hooks/useIntegrations.jsx
@@ -173,10 +173,6 @@ function useIntegrations(
)
const registerPlugin = useCallback((pluginConfig) => {
- console.log(
- '>>> REGISTERING PLUGIN...',
- `${pluginConfig?.name} [${pluginConfig?.type}]`
- )
// @todo: Validate Plugin before Registration
return new Plugin(pluginConfig)
}, [])
@@ -193,7 +189,6 @@ function useIntegrations(
]
// todo: enhance plugin validation
try {
- console.log('>>> INTEGRATIONS HOOK: VALIDATING PLUGIN...', pluginConfig)
JSON.parse(JSON.stringify(pluginConfig))
isValid = requiredProperties.every((p) =>
Object.prototype.hasOwnProperty.call(pluginConfig, p)
@@ -222,10 +217,6 @@ function useIntegrations(
)
useEffect(() => {
- console.log(
- '>>> INTEGRATIONS HOOK: PLUGIN REGISTRY CONFIGURATION!!!',
- registry
- )
setPlugins((aP) => [
// ...aP,
...registry
@@ -236,69 +227,9 @@ function useIntegrations(
}, [registry, setPlugins, validatePlugin, registerPlugin])
useEffect(() => {
- console.log(
- '>>> INTEGRATIONS HOOK: REGISTERED PLUGIN OBJECT CLASSES...',
- plugins
- )
setActiveProvider(plugins[0])
}, [plugins])
- useEffect(() => {
- console.log(
- '>>> INTEGRATIONS HOOK: REGISTERED LIVE API PLUGIN OBJECT CLASSES...',
- apiPlugins
- )
- }, [apiPlugins])
-
- useEffect(() => {
- console.log('>>> INTEGRATIONS HOOK: ACTIVE PROVIDER..', activeProvider)
- }, [activeProvider])
-
- useEffect(() => {
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDERS CONFIGURATION LIST ...',
- Providers
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER LABELS CONFIGURATION LIST ...',
- ProviderLabels
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER CONFIGURATION CONNECTION FORM LABELS..',
- ProviderFormLabels
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER CONFIGURATION CONNECTION FORM
PLACEHOLDERS..',
- ProviderFormPlaceholders
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER CONFIGURATION CONNECTION FORM
TOOLTIPS..',
- ProviderFormTooltips
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER CONFIGURATION PROVIDER ICONS..',
- ProviderIcons
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER CONNECTION LIMITS...',
- ProviderConnectionLimits
- )
- console.log(
- '>>> INTEGRATIONS HOOK: PROVIDER DATA SOURCES LIST...',
- DataSources
- )
- }, [
- activeProvider,
- Providers,
- ProviderLabels,
- ProviderFormLabels,
- ProviderFormPlaceholders,
- ProviderConnectionLimits,
- ProviderFormTooltips,
- ProviderIcons,
- DataSources
- ])
-
return {
activeProvider,
registry,
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index 6cad37d6..481117ac 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -21,13 +21,15 @@ import { Navbar } from '@blueprintjs/core'
export const Container = styled.div`
display: flex;
- min-height: 100vh;
+ height: 100vh;
+ background-color: #f9f9fa;
+ overflow: hidden;
`
export const Sider = styled.div`
- flex: 0 0 250px;
+ flex: 0 0 200px;
position: relative;
- width: 250px;
+ width: 200px;
background-color: #292b3f;
.logo {
@@ -50,7 +52,7 @@ export const Sider = styled.div`
}
.menu {
- margin: 0 20px;
+ margin: 0 4px;
color: #fff;
background-color: transparent;
@@ -100,17 +102,21 @@ export const Inner = styled.div`
display: flex;
flex-direction: column;
flex: auto;
- min-height: 100vh;
+ height: 100vh;
+ overflow: auto;
`
export const Header = styled(Navbar)`
flex: 0 0 50px;
+ background-color: #f9f9fa;
box-shadow: none;
`
export const Content = styled.div`
flex: auto;
- padding: 16px 24px;
+ margin: 24px auto 0;
+ max-width: 820px;
+ width: 100%;
`
export const SlackContainer = styled.div`
diff --git a/config-ui/src/layouts/base/use-menu.ts
b/config-ui/src/layouts/base/use-menu.ts
index 8ece3035..b997225e 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -34,7 +34,7 @@ export type MenuItemType = {
export const useMenu = () => {
const getGrafanaUrl = () => {
const suffix = '/d/0Rjxknc7z/demo-homepage?orgId=1'
- const {protocol, hostname} = window.location
+ const { protocol, hostname } = window.location
return process.env.LOCAL
? `${protocol}//${hostname}:3002${suffix}`
@@ -46,7 +46,7 @@ export const useMenu = () => {
[
{
key: 'connection',
- title: 'Data Connections',
+ title: 'Connections',
icon: 'data-connection',
path: '/integrations',
children: Plugins.filter((p) => p.type === 'integration').map(
diff --git a/config-ui/src/pages/connections/incoming-webhook/index.jsx
b/config-ui/src/pages/connections/incoming-webhook/index.jsx
index f641b266..3c468df2 100644
--- a/config-ui/src/pages/connections/incoming-webhook/index.jsx
+++ b/config-ui/src/pages/connections/incoming-webhook/index.jsx
@@ -66,7 +66,7 @@ export const IncomingWebhook = () => {
}
return (
- <div className='container'>
+ <>
<div className='main'>
<AppCrumbs
items={[
@@ -172,6 +172,6 @@ export const IncomingWebhook = () => {
onCancel={handleHideModal}
/>
)}
- </div>
+ </>
)
}
diff --git a/config-ui/src/styles/common.scss b/config-ui/src/styles/common.scss
index 81a8c0c6..068920f1 100644
--- a/config-ui/src/styles/common.scss
+++ b/config-ui/src/styles/common.scss
@@ -13,19 +13,6 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-.container {
- display: flex;
- justify-content: space-evenly;
- padding-top: 50px;
- min-height: 100vh;
- overflow: hidden;
-
- @media only screen and (max-width: 850px) {
- justify-content: flex-start;
- padding: 50px 30px;
- }
-}
-
.main {
margin: 0 auto;
width: 750px;
