[incubator-devlake] branch main updated: fix(config-ui): add plugin icon in add connection (#5647)

[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 4fe54ac9e fix(config-ui): add plugin icon in add connection (#5647)
4fe54ac9e is described below

commit 4fe54ac9e441e3f2d406ae0607a64ff02185411b
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Mon Jul 10 17:23:22 2023 +1200

    fix(config-ui): add plugin icon in add connection (#5647)
---
 config-ui/src/components/selector/selector/index.tsx        | 13 ++++++++++++-
 .../detail/components/add-connection-dialog/index.tsx       |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/config-ui/src/components/selector/selector/index.tsx 
b/config-ui/src/components/selector/selector/index.tsx
index a73b13f52..e425c5139 100644
--- a/config-ui/src/components/selector/selector/index.tsx
+++ b/config-ui/src/components/selector/selector/index.tsx
@@ -25,6 +25,7 @@ interface Props<T> {
   disabledItems?: T[];
   getKey?: (item: T) => ID;
   getName?: (item: T) => string;
+  getIcon?: (item: T) => string;
   selectedItem?: T;
   onChangeItem?: (selectedItem: T) => void;
 }
@@ -34,6 +35,7 @@ export const Selector = <T,>({
   disabledItems = [],
   getKey = (it) => it as string,
   getName = (it) => it as string,
+  getIcon,
   onChangeItem,
   ...props
 }: Props<T>) => {
@@ -53,9 +55,18 @@ export const Selector = <T,>({
   const itemRenderer = (item: T, { handleClick }: any) => {
     const key = getKey(item);
     const name = getName(item);
+    const icon = getIcon?.(item) ?? null;
     const disabled = !!disabledItems.find((it) => getKey(it) === getKey(item)) 
|| selectedItem === item;
 
-    return <MenuItem key={key} disabled={disabled} text={<span>{name}</span>} 
onClick={handleClick} />;
+    return (
+      <MenuItem
+        key={key}
+        disabled={disabled}
+        text={<span>{name}</span>}
+        icon={icon ? <img src={icon} alt="" width={20} /> : null}
+        onClick={handleClick}
+      />
+    );
   };
 
   const handleItemSelect = (item: T) => {
diff --git 
a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
 
b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
index 04ca3a7ec..069b7af57 100644
--- 
a/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
+++ 
b/config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx
@@ -34,7 +34,7 @@ export const AddConnectionDialog = ({ disabled = [], 
onCancel, onSubmit }: Props
   const [step, setStep] = useState(1);
   const [selectedConnection, setSelectedConnection] = 
useState<ConnectionItemType>();
 
-  const { connections } = useConnections();
+  const { connections } = useConnections({ filterPlugin: ['webhook'] });
 
   const disabledItems = useMemo(
     () => connections.filter((cs) => (disabled.length ? 
disabled.includes(cs.unique) : false)),
@@ -63,6 +63,7 @@ export const AddConnectionDialog = ({ disabled = [], 
onCancel, onSubmit }: Props
             disabledItems={disabledItems}
             getKey={(it) => it.unique}
             getName={(it) => it.name}
+            getIcon={(it) => it.icon}
             selectedItem={selectedConnection}
             onChangeItem={(selectedItem) => 
setSelectedConnection(selectedItem)}
           />