This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch refactor-6307 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit caaac33fcb742d7a1aea4aab62d9623b1f923f60 Author: mintsweet <[email protected]> AuthorDate: Thu Dec 14 16:36:08 2023 +1300 refactor(config-ui): use new ui change the component inspector --- config-ui/src/components/inspector/index.tsx | 26 +++++----------------- config-ui/src/components/inspector/styled.ts | 2 +- config-ui/src/routes/pipeline/components/table.tsx | 2 +- 3 files changed, 8 insertions(+), 22 deletions(-) diff --git a/config-ui/src/components/inspector/index.tsx b/config-ui/src/components/inspector/index.tsx index 91eb53992..c8bdb8b2d 100644 --- a/config-ui/src/components/inspector/index.tsx +++ b/config-ui/src/components/inspector/index.tsx @@ -16,35 +16,21 @@ * */ -import { Drawer, DrawerSize, Classes, IconName } from '@blueprintjs/core'; +import { Drawer } from 'antd'; import * as S from './styled'; interface Props { - isOpen: boolean; + open: boolean; data: any; title?: string; onClose?: () => void; } -export const Inspector = ({ isOpen, data, title, onClose }: Props) => { - const props = { - icon: 'code' as IconName, - size: DrawerSize.SMALL, - autoFocus: true, - canEscapeKeyClose: true, - canOutsideClickClose: true, - enforceFocus: true, - hasBackdrop: false, - usePortal: true, - isOpen, - title, - onClose, - }; - +export const Inspector = ({ open, data, title, onClose }: Props) => { return ( - <Drawer {...props}> - <S.Container className={Classes.DRAWER_BODY}> + <Drawer bodyStyle={{ padding: 0 }} open={open} title={title} onClose={onClose}> + <S.Wrapper> <div className="title"> <h3>JSON CONFIGURATION</h3> <span>application/json</span> @@ -55,7 +41,7 @@ export const Inspector = ({ isOpen, data, title, onClose }: Props) => { <pre>{JSON.stringify(data, null, ' ')}</pre> </code> </div> - </S.Container> + </S.Wrapper> </Drawer> ); }; diff --git a/config-ui/src/components/inspector/styled.ts b/config-ui/src/components/inspector/styled.ts index 163b99dd0..c4bc25cb0 100644 --- a/config-ui/src/components/inspector/styled.ts +++ b/config-ui/src/components/inspector/styled.ts @@ -18,7 +18,7 @@ import styled from 'styled-components'; -export const Container = styled.div` +export const Wrapper = styled.div` padding: 16px 24px; background-color: #f3f3f3; diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx index 981792c7b..e6dfb227c 100644 --- a/config-ui/src/routes/pipeline/components/table.tsx +++ b/config-ui/src/routes/pipeline/components/table.tsx @@ -122,7 +122,7 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => { dataSource={dataSource} pagination={pagination} /> - {JSON && <Inspector isOpen title={`Pipeline ${JSON?.id}`} data={JSON} onClose={() => setJSON(null)} />} + {JSON && <Inspector open title={`Pipeline ${JSON?.id}`} data={JSON} onClose={() => setJSON(null)} />} {id && ( <Modal open width={820} centered title={`Pipeline ${id}`} footer={null} onCancel={() => setId(null)}> <PipelineTasks id={id} />
