chore: add new CustomTextArea component and use it for k8s

ui/components/providers/workflow/forms/via-credentials/k8s-credentials-form.tsx

@@ -1,6 +1,6 @@
 import { Control } from "react-hook-form";
 
-import { CustomInput } from "@/components/ui/custom";
+import { CustomTextarea } from "@/components/ui/custom";
 import { KubernetesCredentials } from "@/types";
 
 export const KubernetesCredentialsForm = ({
@@ -15,17 +15,17 @@ export const KubernetesCredentialsForm = ({
           Connect via Credentials
         </div>
         <div className="py-2 text-default-500">
-          Please provide the information for your Kubernetes credentials.
+          Please provide the kubeconfig content for your Kubernetes credentials.
         </div>
       </div>
-      <CustomInput
+      <CustomTextarea
         control={control}
         name="kubeconfig_content"
-        type="text"
         label="Kubeconfig Content"
         labelPlacement="inside"
-        placeholder="Enter the Kubeconfig Content"
+        placeholder="Paste your Kubeconfig YAML content here"
         variant="bordered"
+        minRows={10}
         isRequired
         isInvalid={!!control._formState.errors.kubeconfig_content}
       />

ui/components/ui/custom/custom-textarea.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Textarea } from "@nextui-org/input";
+import React from "react";
+import { Control, FieldPath, FieldValues } from "react-hook-form";
+
+import { FormControl, FormField, FormMessage } from "@/components/ui/form";
+
+interface CustomTextareaProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label?: string;
+  labelPlacement?: "inside" | "outside" | "outside-left";
+  variant?: "flat" | "bordered" | "underlined" | "faded";
+  size?: "sm" | "md" | "lg";
+  placeholder?: string;
+  defaultValue?: string;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  fullWidth?: boolean;
+  disableAutosize?: boolean;
+  description?: React.ReactNode;
+}
+
+export const CustomTextarea = <T extends FieldValues>({
+  control,
+  name,
+  label = name,
+  labelPlacement = "inside",
+  placeholder,
+  variant = "flat",
+  size = "md",
+  defaultValue,
+  isRequired = false,
+  isInvalid = false,
+  minRows = 3,
+  maxRows = 8,
+  fullWidth = true,
+  disableAutosize = false,
+  description,
+}: CustomTextareaProps<T>) => {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <>
+          <FormControl>
+            <Textarea
+              id={name}
+              label={label}
+              labelPlacement={labelPlacement}
+              placeholder={placeholder}
+              variant={variant}
+              size={size}
+              isInvalid={isInvalid}
+              isRequired={isRequired}
+              defaultValue={defaultValue}
+              minRows={minRows}
+              maxRows={maxRows}
+              fullWidth={fullWidth}
+              disableAutosize={disableAutosize}
+              description={description}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-system-error dark:text-system-error" />
+        </>
+      )}
+    />
+  );
+};

ui/components/ui/custom/index.ts

@@ -5,3 +5,4 @@ export * from "./custom-dropdown-filter";
 export * from "./custom-input";
 export * from "./custom-loader";
 export * from "./custom-radio";
+export * from "./custom-textarea";