This is an automated email from the ASF dual-hosted git repository.
klesh 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 0e53cd058 refactor(config-ui): move theme config to root (#6812)
0e53cd058 is described below
commit 0e53cd058af1d3dc755b6789ccf3102cee273c80
Author: 青湛 <[email protected]>
AuthorDate: Mon Jan 15 20:25:02 2024 +1300
refactor(config-ui): move theme config to root (#6812)
---
config-ui/src/main.tsx | 15 ++-
config-ui/src/routes/layout/layout.tsx | 162 ++++++++++++++++-----------------
2 files changed, 89 insertions(+), 88 deletions(-)
diff --git a/config-ui/src/main.tsx b/config-ui/src/main.tsx
index e72bc3db5..d3b35c690 100644
--- a/config-ui/src/main.tsx
+++ b/config-ui/src/main.tsx
@@ -19,6 +19,7 @@
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
import { PageLoading } from '@/components';
@@ -27,8 +28,16 @@ import { router } from './app/routrer';
import './index.css';
ReactDOM.render(
- <Provider store={store}>
- <RouterProvider router={router} fallbackElement={<PageLoading />} />
- </Provider>,
+ <ConfigProvider
+ theme={{
+ token: {
+ colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7',
+ },
+ }}
+ >
+ <Provider store={store}>
+ <RouterProvider router={router} fallbackElement={<PageLoading />} />
+ </Provider>
+ </ConfigProvider>,
document.getElementById('root'),
);
diff --git a/config-ui/src/routes/layout/layout.tsx
b/config-ui/src/routes/layout/layout.tsx
index 437afadce..f57a81a93 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -20,7 +20,7 @@ import { useState, useEffect, useRef } from 'react';
import { useLoaderData, Outlet, useNavigate, useLocation } from
'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import { CloseOutlined } from '@ant-design/icons';
-import { ConfigProvider, Layout as AntdLayout, Menu, Flex, Divider, Tooltip,
Button } from 'antd';
+import { Layout as AntdLayout, Menu, Flex, Divider, Tooltip, Button } from
'antd';
import API from '@/api';
import { PageLoading, Logo, ExternalLink, Message } from '@/components';
@@ -117,91 +117,83 @@ export const Layout = () => {
};
return (
- <ConfigProvider
- theme={{
- token: {
- colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7',
- },
- }}
- >
- <AntdLayout style={{ height: '100vh' }}>
- <Sider>
- {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
- <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff'
}}>
- {import.meta.env.DEVLAKE_TITLE_CUSTOM}
- </h2>
- ) : (
- <Logo style={{ padding: 24 }} />
- )}
- <Menu
- mode="inline"
- theme="dark"
- items={menuItems}
- openKeys={openKeys}
- selectedKeys={selectedKeys}
- onClick={({ key }) => navigate(key)}
- onOpenChange={(keys) => setOpenKeys(keys)}
- />
- <div style={{ position: 'absolute', right: 0, bottom: 20, left: 0,
color: '#fff', textAlign: 'center' }}>
- {version}
- </div>
- </Sider>
- <AntdLayout style={{ overflowY: 'auto' }}>
- <Header
- style={{
- display: 'flex',
- justifyContent: 'flex-end',
- alignItems: 'center',
- padding: '0 24px',
- height: 50,
- background: 'transparent',
- }}
- >
- {headerItems
- .filter((item) =>
- import.meta.env.DEVLAKE_COPYRIGHT_HIDE ? !['GitHub',
'Slack'].includes(item.label) : true,
- )
- .map((item, i, arr) => (
- <ExternalLink key={item.label} link={item.link} style={{
display: 'flex', alignItems: 'center' }}>
- {item.icon}
- <span style={{ marginLeft: 4 }}>{item.label}</span>
- {i !== arr.length - 1 && <Divider type="vertical" />}
- </ExternalLink>
- ))}
- </Header>
- <Content style={{ margin: '16px auto', width: 1188 }}>
- <Outlet />
- </Content>
- {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && (
- <Footer>
- <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
- </Footer>
- )}
- <CSSTransition in={!!tipsShow} unmountOnExit timeout={300}
nodeRef={tipsRef} classNames="tips">
- <S.Tips ref={tipsRef}>
- <div className="content">
- {tipsType === 'data-scope-changed' && (
- <Flex gap="middle">
- <Message content="The change of Data Scope(s) will affect
the metrics of this project. Would you like to recollect the data to get them
updated?" />
- <Button type="primary" loading={operating}
onClick={handleRunBP}>
- Recollect Data
- </Button>
- </Flex>
- )}
- {tipsType === 'scope-config-changed' && (
- <Message
- content="Scope Config(s) have been updated. If you would
like to re-transform or re-collect the data in the related
+ <AntdLayout style={{ height: '100vh' }}>
+ <Sider>
+ {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
+ <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff' }}>
+ {import.meta.env.DEVLAKE_TITLE_CUSTOM}
+ </h2>
+ ) : (
+ <Logo style={{ padding: 24 }} />
+ )}
+ <Menu
+ mode="inline"
+ theme="dark"
+ items={menuItems}
+ openKeys={openKeys}
+ selectedKeys={selectedKeys}
+ onClick={({ key }) => navigate(key)}
+ onOpenChange={(keys) => setOpenKeys(keys)}
+ />
+ <div style={{ position: 'absolute', right: 0, bottom: 20, left: 0,
color: '#fff', textAlign: 'center' }}>
+ {version}
+ </div>
+ </Sider>
+ <AntdLayout style={{ overflowY: 'auto' }}>
+ <Header
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ padding: '0 24px',
+ height: 50,
+ background: 'transparent',
+ }}
+ >
+ {headerItems
+ .filter((item) =>
+ import.meta.env.DEVLAKE_COPYRIGHT_HIDE ? !['GitHub',
'Slack'].includes(item.label) : true,
+ )
+ .map((item, i, arr) => (
+ <ExternalLink key={item.label} link={item.link} style={{
display: 'flex', alignItems: 'center' }}>
+ {item.icon}
+ <span style={{ marginLeft: 4 }}>{item.label}</span>
+ {i !== arr.length - 1 && <Divider type="vertical" />}
+ </ExternalLink>
+ ))}
+ </Header>
+ <Content style={{ margin: '16px auto', width: 1188 }}>
+ <Outlet />
+ </Content>
+ {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && (
+ <Footer>
+ <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
+ </Footer>
+ )}
+ <CSSTransition in={!!tipsShow} unmountOnExit timeout={300}
nodeRef={tipsRef} classNames="tips">
+ <S.Tips ref={tipsRef}>
+ <div className="content">
+ {tipsType === 'data-scope-changed' && (
+ <Flex gap="middle">
+ <Message content="The change of Data Scope(s) will affect
the metrics of this project. Would you like to recollect the data to get them
updated?" />
+ <Button type="primary" loading={operating}
onClick={handleRunBP}>
+ Recollect Data
+ </Button>
+ </Flex>
+ )}
+ {tipsType === 'scope-config-changed' && (
+ <Message
+ content="Scope Config(s) have been updated. If you would
like to re-transform or re-collect the data in the related
project(s), please go to the Project page and do so."
- />
- )}
- </div>
- <Tooltip title="Close">
- <Button shape="circle" ghost icon={<CloseOutlined />}
onClick={() => dispatch(hideTips())} />
- </Tooltip>
- </S.Tips>
- </CSSTransition>
- </AntdLayout>
+ />
+ )}
+ </div>
+ <Tooltip title="Close">
+ <Button shape="circle" ghost icon={<CloseOutlined />}
onClick={() => dispatch(hideTips())} />
+ </Tooltip>
+ </S.Tips>
+ </CSSTransition>
</AntdLayout>
- </ConfigProvider>
+ </AntdLayout>
);
};
