Add Kubernetes Connection Types for CNRM, EKS, and GKE

src/components/Connections/ConnectionForm.tsx

@@ -119,7 +119,7 @@ export function ConnectionForm({
       }}
       onSubmit={handleSubmit}
     >
-      {() => (
+      {({ values }) => (
         <Form className="flex flex-1 flex-col overflow-y-auto">
           <div
             className={clsx(
@@ -131,6 +131,11 @@ export function ConnectionForm({
             <div className={clsx("mb-2 flex flex-col px-2")}>
               <div className="flex flex-col space-y-4 overflow-y-auto p-4">
                 {connectionType.fields.map((field, index) => {
+                  // Only render the field if it doesn't have a condition or its condition returns true
+                  if (field.condition && !field.condition(values)) {
+                    return null;
+                  }
+
                   return (
                     <RenderConnectionFormFields field={field} key={field.key} />
                   );
@@ -216,4 +221,4 @@ export function ConnectionForm({
   );
 }
 
-export default ConnectionForm;
+export default ConnectionForm;

src/components/Connections/RenderConnectionFormFields.tsx

@@ -4,14 +4,66 @@
 import FormikSwitchField from "../Forms/Formik/FormikSwitchField";
 import FormikTextInput from "../Forms/Formik/FormikTextInput";
 import FormikConnectionOptionsSwitchField from "./FormikConnectionOptionsSwitchField";
-import { ConnectionFormFields } from "./connectionTypes";
+import { ConnectionFormFields, ConnectionValueType } from "./connectionTypes";
+import { useFormikContext } from "formik";
+import { useQuery } from "@tanstack/react-query";
+import { Connection } from "./ConnectionFormModal";
 
 interface FieldViewProps {
   field: ConnectionFormFields;
 }
 
+// Connection Select component for choosing connections by type
+function ConnectionSelect({ field }: { field: ConnectionFormFields }) {
+  const { values, setFieldValue } = useFormikContext<any>();
+
+  // Use the connections API endpoint to fetch all connections
+  const { data: connections, isLoading } = useQuery(
+    ['connections'],
+    async () => {
+      const response = await fetch('/api/connections');
+      if (!response.ok) {
+        throw new Error('Failed to fetch connections');
+      }
+      return response.json();
+    },
+    { staleTime: 30000 }
+  );
+
+  // Filter connections by the specified connection type
+  const filteredConnections = connections?.filter(
+    (connection: Connection) => connection.type === field.connectionType
+  ) || [];
+
+  return (
+    <div className="flex flex-col space-y-1">
+      <label htmlFor={field.key} className="text-sm font-semibold text-gray-700">
+        {field.label} {field.required && <span className="text-red-500">*</span>}
+      </label>
+      <select
+        id={field.key}
+        name={field.key}
+        className="rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        value={values[field.key] || ""}
+        onChange={(e) => setFieldValue(field.key, e.target.value)}
+        disabled={isLoading}
+      >
+        <option value="">Select a connection</option>
+        {filteredConnections.map((connection: Connection) => (
+          <option key={connection.id} value={connection.id}>
+            {connection.name}
+          </option>
+        ))}
+      </select>
+      {isLoading && <div className="text-xs text-gray-500">Loading connections...</div>}
+      {field.hint && <p className="text-xs text-gray-500">{field.hint}</p>}
+    </div>
+  );
+}
+
 export default function RenderConnectionFormFields({ field }: FieldViewProps) {
   const type = field.type ?? "input";
+
   switch (type) {
     case "input":
       return (
@@ -56,6 +108,9 @@
       );
     case "ConnectionSwitch":
       return <FormikConnectionOptionsSwitchField field={field} />;
+
+    case "ConnectionSelect":
+      return <ConnectionSelect field={field} />;
 
     case "SwitchField":
       return (
@@ -91,4 +146,4 @@
     default:
       return null;
   }
-}
+}