fix: show badge in connection name

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>
+  );
 };

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}>

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;
   }