fix: add connection type icons to the dropdown

Closes #1361
flanksource · Nov 9, 2023 · 128bdf0 · 128bdf0
1 parent 0ab5db7
commit 128bdf0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/components/Forms/Formik/FormikConnectionField.tsx b/src/components/Forms/Formik/FormikConnectionField.tsx
@@ -2,6 +2,8 @@ import { useQuery } from "@tanstack/react-query";
 import { getAll } from "../../../api/schemaResources";
 import { toastError } from "../../Toast/toast";
 import FormikSelectDropdown from "./FormikSelectDropdown";
+import { Icon } from "../../Icon";
+import { Connection } from "../../Connections/ConnectionForm";
 
 type Props = {
   name: string;
@@ -24,13 +26,14 @@ export default function FormikConnectionField({
         api: "canary-checker",
         name: "Connections"
       });
-      return res.data ?? [];
+      return (res.data as Connection[]) ?? [];
     },
     select: (connections) => {
       return connections.map((connection) => {
         return {
           label: connection.name,
-          value: connection.id
+          value: connection.id!,
+          icon: <Icon className="h-5" name={connection.type} />
         };
       });
     },

diff --git a/src/components/Forms/Formik/FormikSelectDropdown.tsx b/src/components/Forms/Formik/FormikSelectDropdown.tsx
@@ -1,16 +1,18 @@
 import { useField } from "formik";
-import {
+import React, {
   ComponentProps,
   useCallback,
   useEffect,
   useMemo,
   useState
 } from "react";
 import Select from "react-select";
+import { components } from "react-select";
 
 type Option = {
   label: string;
   value: string;
+  icon?: React.ReactNode;
 };
 
 type Props = {
@@ -89,6 +91,32 @@ export default function FormikSelectDropdown({
           field.onBlur(event);
           setIsTouched(true);
         }}
+        components={{
+          Option: ({ children, ...props }) => {
+            return (
+              <components.Option {...props}>
+                <div className="flex flex-row gap-2 items-center">
+                  {(props.data as any).icon && (
+                    <div>{(props.data as any).icon}</div>
+                  )}
+                  <div className="flex-1">{children}</div>
+                </div>
+              </components.Option>
+            );
+          },
+          SingleValue: ({ children, ...props }) => {
+            return (
+              <components.SingleValue {...props}>
+                <div className="flex flex-row gap-2 items-center">
+                  {(props.data as any).icon && (
+                    <div>{(props.data as any).icon}</div>
+                  )}
+                  <div className="flex-1">{children}</div>
+                </div>
+              </components.SingleValue>
+            );
+          }
+        }}
         {...props}
       />
       {hint && <p className="text-sm text-gray-500">{hint}</p>}