fix: add option to have switch field for connection form

src/components/Connections/ConnectionForm.tsx

@@ -1,20 +1,16 @@
 import clsx from "clsx";
 import { Form, Formik } from "formik";
-import FormikTextInput from "../Forms/Formik/FormikTextInput";
-import FormikCheckbox from "../Forms/Formik/FormikCheckbox";
+import React, { useEffect, useState } from "react";
+import { FaTrash } from "react-icons/fa";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
 import { Modal } from "../Modal";
-import { useEffect, useState } from "react";
+import RenderConnectionFormFields from "./RenderConnectionFormFields";
 import {
   ConnectionType,
   ConnectionValueType,
-  Field,
   connectionTypes
 } from "./connectionTypes";
-import { FormikEnvVarSource } from "../Forms/Formik/FormikEnvVarSource";
-import { Icon } from "../Icon";
-import React from "react";
-import { FaTrash } from "react-icons/fa";
-import { Button } from "../Button";
 
 export type Connection = {
   altID?: string;
@@ -108,55 +104,6 @@ export default function ConnectionForm({
     return result as Connection;
   };
 
-  const getFieldView = (field: Field) => {
-    const type = field.type ?? "input";
-    switch (type) {
-      case "input":
-        return (
-          <FormikTextInput
-            name={field.key}
-            label={field.label}
-            required={field.required}
-            hint={field.hint}
-            defaultValue={field.default?.toString()}
-          />
-        );
-      case "numberInput":
-        return (
-          <FormikTextInput
-            type="number"
-            name={field.key}
-            label={field.label}
-            required={field.required}
-            hint={field.hint}
-            defaultValue={field.default?.toString()}
-          />
-        );
-      case "checkbox":
-        return (
-          <FormikCheckbox
-            name={field.key}
-            label={field.label}
-            labelClassName="text-sm font-semibold text-gray-700"
-            required={field.required}
-            hint={field.hint}
-          />
-        );
-      case "EnvVarSource":
-        return (
-          <FormikEnvVarSource
-            name={field.key}
-            label={field.label}
-            variant={field.variant}
-            hint={field.hint}
-            required={field.required}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
   const getFormView = (connectionType: ConnectionType) => {
     return (
       <Formik
@@ -194,9 +141,7 @@ export default function ConnectionForm({
               <div className="flex flex-col space-y-4 overflow-y-auto p-4">
                 {connectionType.fields.map((field, index) => {
                   return (
-                    <React.Fragment key={index}>
-                      {getFieldView(field)}
-                    </React.Fragment>
+                    <RenderConnectionFormFields field={field} key={field.key} />
                   );
                 })}
               </div>

src/components/Connections/FormikConnectionOptionsSwitchField.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import RenderConnectionFormFields from "./RenderConnectionFormFields";
+import { ConnectionFormFields } from "./connectionTypes";
+import { Switch } from "../Switch";
+import { useFormikContext } from "formik";
+
+type Props = {
+  field: ConnectionFormFields;
+};
+
+export default function FormikConnectionOptionsSwitchField({ field }: Props) {
+  const [selectedGroup, setSelectedGroup] = useState(field.default);
+
+  const { setFieldValue } = useFormikContext<Record<string, any>>();
+
+  if (!field.options) {
+    return null;
+  }
+
+  const selectedField = field.options.find(
+    (option) => option.key === selectedGroup
+  );
+
+  return (
+    <div className="flex flex-col gap-4 overflow-y-auto">
+      <label className="font-semibold text-sm">{field.label}</label>
+      <div className="flex flex-row">
+        <Switch
+          options={[...field.options?.map((option) => option.label)]}
+          defaultValue="None"
+          value={
+            field.options?.find((option) => option.key === selectedGroup)?.label
+          }
+          onChange={(v) => {
+            // reset all other fields that are not selected
+            field.options?.forEach((option) => {
+              if (option.key === v) {
+                return;
+              }
+              setFieldValue(option.key, undefined);
+            });
+            setSelectedGroup(
+              field.options?.find((option) => option.label === v)?.key
+            );
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-4 overflow-y-auto px-4">
+        {selectedField?.fields?.map((field) => (
+          <RenderConnectionFormFields field={field} key={field.key} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Connections/RenderConnectionFormFields.tsx

@@ -0,0 +1,60 @@
+import FormikConnectionOptionsSwitchField from "./FormikConnectionOptionsSwitchField";
+import FormikCheckbox from "../Forms/Formik/FormikCheckbox";
+import { FormikEnvVarSource } from "../Forms/Formik/FormikEnvVarSource";
+import FormikTextInput from "../Forms/Formik/FormikTextInput";
+import { ConnectionFormFields } from "./connectionTypes";
+
+interface FieldViewProps {
+  field: ConnectionFormFields;
+}
+
+export default function RenderConnectionFormFields({ field }: FieldViewProps) {
+  const type = field.type ?? "input";
+  switch (type) {
+    case "input":
+      return (
+        <FormikTextInput
+          name={field.key}
+          label={field.label}
+          required={field.required}
+          hint={field.hint}
+          defaultValue={field.default?.toString()}
+        />
+      );
+    case "numberInput":
+      return (
+        <FormikTextInput
+          type="number"
+          name={field.key}
+          label={field.label}
+          required={field.required}
+          hint={field.hint}
+          defaultValue={field.default?.toString()}
+        />
+      );
+    case "checkbox":
+      return (
+        <FormikCheckbox
+          name={field.key}
+          label={field.label}
+          labelClassName="text-sm font-semibold text-gray-700"
+          required={field.required}
+          hint={field.hint}
+        />
+      );
+    case "EnvVarSource":
+      return (
+        <FormikEnvVarSource
+          name={field.key}
+          label={field.label}
+          variant={field.variant}
+          hint={field.hint}
+          required={field.required}
+        />
+      );
+    case "switch":
+      return <FormikConnectionOptionsSwitchField field={field} />;
+    default:
+      return null;
+  }
+}

src/components/Connections/connectionTypes.tsx

@@ -7,7 +7,8 @@ const enum ConnectionsFieldTypes {
   checkbox = "checkbox",
   input = "input",
   numberInput = "numberInput",
-  EnvVarSource = "EnvVarSource"
+  EnvVarSource = "EnvVarSource",
+  switch = "switch"
 }
 
 type Variant = "small" | "large";
@@ -17,14 +18,19 @@ const variants: { [key: string]: Variant } = {
   large: "large"
 };
 
-export type Field = {
+export type ConnectionFormFields = {
   label: string;
   key: string;
   type: ConnectionsFieldTypes;
   variant?: Variant;
   required?: boolean;
   hint?: string;
   default?: boolean | number | string;
+  options?: {
+    label: string;
+    key: string;
+    fields: Omit<ConnectionFormFields, "options">[];
+  }[];
 };
 
 export const enum ConnectionValueType {
@@ -74,7 +80,7 @@ export type ConnectionType = {
   title: string;
   value: ConnectionValueType;
   icon?: React.ReactNode | string | null;
-  fields: Field[];
+  fields: ConnectionFormFields[];
   convertToFormSpecificValue?: (data: Record<string, string>) => Connection;
   preSubmitConverter?: (data: Record<string, string>) => object;
   hide?: boolean;
@@ -1826,22 +1832,40 @@ export const connectionTypes: ConnectionType[] = [
         required: true
       },
       {
-        label: "Username",
-        key: "username",
-        type: ConnectionsFieldTypes.EnvVarSource,
-        variant: variants.large
-      },
-      {
-        label: "Password",
-        key: "password",
-        type: ConnectionsFieldTypes.EnvVarSource,
-        variant: variants.large
-      },
-      {
-        label: "SSH Key",
-        key: "certificate",
-        type: ConnectionsFieldTypes.EnvVarSource,
-        variant: variants.large
+        label: "Authentication",
+        key: "authentication",
+        type: ConnectionsFieldTypes.switch,
+        default: "certificate",
+        options: [
+          {
+            label: "SSH Key",
+            key: "certificate",
+            fields: [
+              {
+                label: "SSH Key",
+                key: "certificate",
+                type: ConnectionsFieldTypes.EnvVarSource,
+                variant: variants.large
+              }
+            ]
+          },
+          {
+            label: "Password",
+            key: "password",
+            fields: [
+              {
+                label: "Username",
+                key: "username",
+                type: ConnectionsFieldTypes.EnvVarSource
+              },
+              {
+                label: "Password",
+                key: "password",
+                type: ConnectionsFieldTypes.EnvVarSource
+              }
+            ]
+          }
+        ]
       },
       {
         label: "Ref",