This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch release-v0.21
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/release-v0.21 by this push:
new 460517a27 fix: show badge in connection name (#7085) (#7087)
460517a27 is described below
commit 460517a2717135b547dccf350350dad2708816ee
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Fri Mar 1 22:01:43 2024 +1300
fix: show badge in connection name (#7085) (#7087)
Co-authored-by: 青湛 <[email protected]>
---
.../src/features/connections/components/name.tsx | 48 ++++++++++++++++++++-
.../blueprint/detail/configuration-panel.tsx | 50 +++++++++-------------
config-ui/src/routes/blueprint/detail/styled.ts | 20 ---------
3 files changed, 67 insertions(+), 51 deletions(-)
diff --git a/config-ui/src/features/connections/components/name.tsx
b/config-ui/src/features/connections/components/name.tsx
index a8bcf9ded..c1c2f6351 100644
--- a/config-ui/src/features/connections/components/name.tsx
+++ b/config-ui/src/features/connections/components/name.tsx
@@ -16,17 +16,63 @@
*
*/
+import { theme } from 'antd';
+import styled from 'styled-components';
+
import { useAppSelector } from '@/hooks';
+import { getPluginConfig } from '@/plugins';
import { selectConnection, selectWebhook } from '../slice';
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+
+ span + span {
+ margin-left: 4px;
+ }
+
+ .icon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+
+ & > svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .name {
+ max-width: 240px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+`;
+
interface Props {
plugin: string;
connectionId: ID;
}
export const ConnectionName = ({ plugin, connectionId }: Props) => {
+ const {
+ token: { colorPrimary },
+ } = theme.useToken();
+
const connection = useAppSelector((state) => selectConnection(state,
`${plugin}-${connectionId}`));
const webhook = useAppSelector((state) => selectWebhook(state,
connectionId));
- return <span>{connection ? connection.name : webhook ? webhook.name :
`${plugin}/connection/${connectionId}`}</span>;
+ const config = getPluginConfig(plugin);
+
+ const name = connection ? connection.name : webhook ? webhook.name :
`${plugin}/connection/${connectionId}`;
+
+ return (
+ <Wrapper>
+ <span className="icon">{config.icon({ color: colorPrimary })}</span>
+ <span className="name" title={name}>
+ {name}
+ </span>
+ </Wrapper>
+ );
};
diff --git a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
b/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
index 5da82606c..a73b10743 100644
--- a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
@@ -19,7 +19,7 @@
import { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { FormOutlined, PlusOutlined } from '@ant-design/icons';
-import { theme, Flex, Table, Button } from 'antd';
+import { Flex, Table, Button } from 'antd';
import API from '@/api';
import { NoData } from '@/components';
@@ -47,10 +47,6 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
const [rawPlan, setRawPlan] = useState('');
const [operating, setOperating] = useState(false);
- const {
- token: { colorPrimary },
- } = theme.useToken();
-
useEffect(() => {
setRawPlan(JSON.stringify(blueprint.plan, null, ' '));
}, [blueprint]);
@@ -199,31 +195,25 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
</Button>
</Flex>
<S.ConnectionList>
- {connections.map((cs) => {
- const plugin = getPluginConfig(cs.plugin);
- return (
- <S.ConnectionItem key={`${cs.plugin}-${cs.connectionId}`}>
- <div className="title">
- <span className="icon">{plugin.icon({ color:
colorPrimary })}</span>
- <ConnectionName plugin={cs.plugin}
connectionId={cs.connectionId} />
- </div>
- <div className="count">
- <span>{cs.scope.length} data scope</span>
- </div>
- <div className="link">
- <Link
- to={
- from === FromEnum.blueprint
- ? PATHS.BLUEPRINT_CONNECTION(blueprint.id,
cs.plugin, cs.connectionId)
- :
PATHS.PROJECT_CONNECTION(blueprint.projectName, cs.plugin, cs.connectionId)
- }
- >
- Edit Data Scope and Scope Config
- </Link>
- </div>
- </S.ConnectionItem>
- );
- })}
+ {connections.map((cs) => (
+ <S.ConnectionItem key={`${cs.plugin}-${cs.connectionId}`}>
+ <ConnectionName plugin={cs.plugin}
connectionId={cs.connectionId} />
+ <div className="count">
+ <span>{cs.scope.length} data scope</span>
+ </div>
+ <div className="link">
+ <Link
+ to={
+ from === FromEnum.blueprint
+ ? PATHS.BLUEPRINT_CONNECTION(blueprint.id,
cs.plugin, cs.connectionId)
+ : PATHS.PROJECT_CONNECTION(blueprint.projectName,
cs.plugin, cs.connectionId)
+ }
+ >
+ Edit Data Scope and Scope Config
+ </Link>
+ </div>
+ </S.ConnectionItem>
+ ))}
</S.ConnectionList>
<Flex justify="center">
<Button type="primary" disabled={!blueprint.enable}
onClick={handleRun}>
diff --git a/config-ui/src/routes/blueprint/detail/styled.ts
b/config-ui/src/routes/blueprint/detail/styled.ts
index 2bba817fc..6a4ecafb5 100644
--- a/config-ui/src/routes/blueprint/detail/styled.ts
+++ b/config-ui/src/routes/blueprint/detail/styled.ts
@@ -59,26 +59,6 @@ export const ConnectionItem = styled.li`
margin-right: 0;
}
- .title {
- display: flex;
- align-items: center;
-
- .icon {
- display: inline-block;
- width: 24px;
- height: 24px;
-
- & > svg {
- width: 100%;
- height: 100%;
- }
- }
-
- span + span {
- margin-left: 8px;
- }
- }
-
.count {
margin: 24px 0;
}
