- added formik custom fields to settings and output

src/features/output/components/ChannelFields.tsx

@@ -1,4 +1,4 @@
-import { Field } from "formik";
+import { Field, FieldArray } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
   const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
   const optionalConstants = optionalConstantsQuery?.data;
+
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -261,6 +262,47 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               </div>
             </>
           )}
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {values?.customFields?.map((_, index) => (
+                    <div key={index} className="flex flex-row justify-between items-center mb-4">
+                      <label htmlFor={`customFields.${index}`} className="mr-2">
+                        Custom Field {index + 1}
+                      </label>
+                      <Field
+                        name={`customFields.${index}`}
+                        key={index}
+                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                        placeholder={`Enter Custom Field ${index + 1}`}
+                        autoComplete="off"
+                      />
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => arrayHelpers.push("")}
+                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                  >
+                    Add Custom Field
+                  </button>
+                  {values?.customFields && values?.customFields?.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => arrayHelpers.pop()}
+                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                    >
+                      Remove Custom Field
+                    </button>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          </div>
         </>
       ) : (
         <></>