This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch fix-5852 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 5ad978cbb89bd152f898ffa42b1150e74103516e Author: mintsweet <[email protected]> AuthorDate: Wed Aug 16 11:45:20 2023 +1200 fix(config-ui): improve the ux for connection detail --- config-ui/src/pages/connection/detail/index.tsx | 22 +++++++++++++--------- config-ui/src/pages/connection/detail/styled.ts | 13 +++++++++++++ 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx index 1456a4409..c16b574ba 100644 --- a/config-ui/src/pages/connection/detail/index.tsx +++ b/config-ui/src/pages/connection/detail/index.tsx @@ -235,17 +235,21 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => { { name: 'Connections', path: '/connections' }, { name, path: '' }, ]} - extra={<Button intent={Intent.DANGER} icon="trash" text="Delete Connection" onClick={handleShowDeleteDialog} />} - > - <S.Wrapper> - <div className="top"> - <div>Please note: In order to view DORA metrics, you will need to add Scope Configs.</div> - <div className="authentication"> - <span style={{ marginRight: 4 }}>Authentication Status:</span> + extra={ + <S.PageHeaderExtra> + <div className="status"> + <span style={{ marginRight: 4 }}>Status:</span> <ConnectionStatus status={status} unique={unique} onTest={onTest} /> - <IconButton icon="annotation" tooltip="Edit Connection" onClick={handleShowUpdateDialog} /> </div> - </div> + <div className="btns"> + <Button outlined intent={Intent.PRIMARY} icon="annotation" text="Edit" onClick={handleShowUpdateDialog} /> + <Button intent={Intent.DANGER} icon="trash" text="Delete" onClick={handleShowDeleteDialog} /> + </div> + </S.PageHeaderExtra> + } + > + <S.Wrapper> + <div className="top">Please note: In order to view DORA metrics, you will need to add Scope Configs.</div> <Buttons> <Button intent={Intent.PRIMARY} icon="add" text="Add Data Scope" onClick={handleShowCreateDataScopeDialog} /> {plugin !== 'tapd' && pluginConfig.scopeConfig && ( diff --git a/config-ui/src/pages/connection/detail/styled.ts b/config-ui/src/pages/connection/detail/styled.ts index bd925519b..5d95ab9ff 100644 --- a/config-ui/src/pages/connection/detail/styled.ts +++ b/config-ui/src/pages/connection/detail/styled.ts @@ -18,6 +18,19 @@ 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` .top { display: flex;
