[incubator-devlake] branch main updated: fix(config-ui): improve the ux for connection detail (#5888)

[klesh]

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 0670301e9 fix(config-ui): improve the ux for connection detail (#5888)
0670301e9 is described below

commit 0670301e97696d3168c41282ab3725ee7fbb0b6a
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Wed Aug 16 14:59:44 2023 +1200

    fix(config-ui): improve the ux for connection detail (#5888)
---
 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;