chore: add connection item display and fix types for icons

src/components/Connections/ConnectionIcon.tsx

@@ -0,0 +1,30 @@
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
+import { useMemo } from "react";
+import { Connection } from "./ConnectionFormModal";
+import { connectionTypes } from "./connectionTypes";
+
+type ConnectionIconProps = {
+  connection: Pick<Connection, "type" | "name" | "id">;
+  showLabel?: boolean;
+};
+export default function ConnectionIcon({
+  connection,
+  showLabel = false
+}: ConnectionIconProps) {
+  const icon = useMemo(() => {
+    return connectionTypes.find((item) => item.value === connection.type)?.icon;
+  }, [connection.type]);
+
+  return (
+    <div className="flex flex-row items-center gap-1">
+      {typeof icon === "string" ? (
+        <Icon name={icon} className="h-5" />
+      ) : (
+        // if not a string, it's a react component
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        icon && <>{icon}</>
+      )}
+      {showLabel && <span>{connection.name}</span>}
+    </div>
+  );
+}

src/components/Connections/ConnectionLink.tsx

@@ -1,8 +1,8 @@
 import { getConnectionByID } from "@flanksource-ui/api/services/connections";
-import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import { useQuery } from "@tanstack/react-query";
 import { Connection } from "./ConnectionFormModal";
+import ConnectionIcon from "./ConnectionIcon";
 
 type ConnectionLinkProps = {
   connection?: Pick<Connection, "name" | "type" | "id">;
@@ -29,10 +29,5 @@ export default function ConnectionLink({
     return null;
   }
 
-  return (
-    <div className="flex flex-row items-center space-x-2">
-      <Icon name={connectionData.type} className="h-auto w-6" />
-      <div>{connectionData.name}</div>
-    </div>
-  );
+  return <ConnectionIcon showLabel connection={connectionData} />;
 }

src/components/Connections/connectionTypes.tsx

@@ -96,7 +96,7 @@ export const enum ConnectionValueType {
 export type ConnectionType = {
   title: string;
   value: ConnectionValueType;
-  icon?: React.ReactNode | string | null;
+  icon?: JSX.Element | string | null;
   fields: ConnectionFormFields[];
   convertToFormSpecificValue?: (data: Record<string, string>) => Connection;
   preSubmitConverter?: (data: Record<string, string>) => object;