From e00f9c6ae0f4a2010836ebc9dff3c41a6062a8e0 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 20 May 2024 16:51:29 -0500
Subject: [PATCH] refactor: use Formik field wrappers as components

---
 .../UIPatternsComplexWizard/steps/StepOne.tsx |  7 ++-
 .../steps/StepThree.tsx                       | 16 +++++--
 .../UIPatternsComplexWizard/steps/StepTwo.tsx | 13 +++--
 .../app/UIPatternsWizard/steps/StepOne.tsx    |  7 ++-
 .../app/UIPatternsWizard/steps/StepThree.tsx  |  4 +-
 .../app/UIPatternsWizard/steps/StepTwo.tsx    |  4 +-
 .../auth/LoginComponent/LoginComponent.tsx    | 10 ++--
 .../details/ProjectEdit/ProjectEditForm.tsx   | 25 ++++++----
 .../details/grants/ProjectGrantFormFields.tsx | 48 ++++++++++++++-----
 .../ProjectPublicationFormFIelds.tsx          | 24 +++++++---
 .../TicketCreateModal/TicketCreateForm.tsx    | 46 +++++++++++++-----
 .../TicketDetailModal/TicketReplyForm.tsx     |  6 ++-
 12 files changed, 154 insertions(+), 56 deletions(-)

diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx
index ef2df37d1..d5e0e8691 100644
--- a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx
@@ -1,19 +1,22 @@
 import { FormikInput } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { UIWizardStep, useWizardValues, InitialValueGenerator } from '..';
+import { Field } from 'formik';
 
 export const StepOne: React.FC = () => {
   const { extra } = useWizardValues();
   return (
     <div>
       <h2>Step One: Extra value two is {extra.extraTwo}</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Field One"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Field Two"
diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx
index 191329a20..f903fb533 100644
--- a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { FormGroup } from 'reactstrap';
 import { Collapse, Button } from '@tacc/core-components';
-import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
+import {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
 import { FormikInput, FormikCheck } from '@tacc/core-components';
 import * as Yup from 'yup';
 import fieldArrayStyles from './FieldArray.module.css';
@@ -34,13 +39,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldRenderProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`${innerKey}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`${innerKey}.include`}
         label="Include"
         required={false}
@@ -114,7 +121,8 @@ const OuterItemRender: React.FC<FieldArrayOfArraysRenderProps> = ({
       title={`Field Array ${outerIndex}`}
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArrayOfArrays.${outerIndex}.name`}
         label="Name"
         required={true}
diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx
index 37c91a72e..e4a541fa6 100644
--- a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx
@@ -8,7 +8,12 @@ import React from 'react';
 import { Button } from '@tacc/core-components';
 import fieldArrayStyles from './FieldArray.module.css';
 import { Collapse } from '@tacc/core-components';
-import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
+import {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
 import { FormikInput, FormikCheck } from '@tacc/core-components';
 import {
   UIWizardStep,
@@ -37,13 +42,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArray.${index}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`fieldArray.${index}.include`}
         label="Include"
         required={false}
diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx
index 0bf33cf26..ea0e8fa5d 100644
--- a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx
@@ -2,18 +2,21 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepOne: React.FC = () => {
   return (
     <div>
       <h2>Step One</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Name"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Description"
diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx
index 29be02c64..4f67afe39 100644
--- a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx
@@ -2,12 +2,14 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepThree: React.FC = () => {
   return (
     <div>
       <h2>Step Three</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldFour"
         required={true}
         label="Field Four"
diff --git a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx
index efe5b7ec7..87f84bc57 100644
--- a/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx
+++ b/apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx
@@ -2,12 +2,14 @@ import { FormikInput } from '@tacc/core-components';
 import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
+import { Field } from 'formik';
 
 export const StepTwo: React.FC = () => {
   return (
     <div>
       <h2>Step Two</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldThree"
         required={true}
         label="Field Three"
diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
index 3129950b1..63d53c75a 100644
--- a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
+++ b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useLocation, Location, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@tacc/tup-hooks';
-import { Formik, Form } from 'formik';
+import { Formik, Form, Field } from 'formik';
 import { FormikInput } from '@tacc/core-components';
 import { Button } from '@tacc/core-components';
 import styles from './LoginComponent.module.css';
@@ -86,7 +86,7 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
   // FAQ: To use inline messaging for required fields (instead of browser):
   //      1. Uncomment this constant definition
   //      2. Pass this constant to <Formik>; validationSchema={validationSchema}
-  //      3. Remove `required` attribute from <FormikInput>'s
+  //      3. Remove `required` attribute from <Field>s
   // const validationSchema = Yup.object({
   //   username: Yup.string().required(),
   //   password: Yup.string().required(),
@@ -116,14 +116,16 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form className="c-form">
           <LoginError status={status} isError={isError} />
-          <FormikInput
+          <Field
+            component={FormikInput}
             name="username"
             label="Username"
             type="text"
             autoComplete="username"
             required
           />
-          <FormikInput
+          <Field
+            component={FormikInput}
             name="password"
             label="Password"
             type="password"
diff --git a/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx b/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx
index 84496019f..63264123b 100644
--- a/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx
+++ b/libs/tup-components/src/projects/details/ProjectEdit/ProjectEditForm.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Formik, Form, FormikHelpers } from 'formik';
+import { Formik, Form, FormikHelpers, Field } from 'formik';
 //import ReCAPTCHA from 'react-google-recaptcha';
 import {
   useProjects,
@@ -71,28 +71,36 @@ export const ProjectAbstractEditForm: React.FC<{
     >
       {({ isValid }) => (
         <Form>
-          <FormikInput
+          <Field
+            component={FormikInput}
             style={{ maxWidth: '100%' }}
             name="title"
             label="Title"
             required
           />
-          <FormikTextarea
+          <Field
+            component={FormikTextarea}
             rows={5}
             style={{ maxWidth: '100%', resize: 'none' }}
             name="description"
             label="Description"
             required
           />
-          <FormikSelect label="Field of Science" name="fieldId" required>
+          <Field
+            component={FormikSelect}
+            label="Field of Science"
+            name="fieldId"
+            required
+          >
             {scienceFields.map((field) => (
               <option key={field.id} value={field.id}>
                 {[...new Array(field.depth)].map((_) => '--- ')}
                 {field.id === 1 ? 'Select Field of Science' : field.name}
               </option>
             ))}
-          </FormikSelect>
-          <FormikSelect
+          </Field>
+          <Field
+            component={FormikSelect}
             label="Secondary Field of Science"
             name="secondaryFieldId"
           >
@@ -104,8 +112,9 @@ export const ProjectAbstractEditForm: React.FC<{
                   : field.name}
               </option>
             ))}
-          </FormikSelect>
-          <FormikInput
+          </Field>
+          <Field
+            component={FormikInput}
             name="chargeCode"
             label="Charge Code"
             description="Project Charge Code cannot be changed."
diff --git a/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx b/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx
index 79aff1c47..3141f1593 100644
--- a/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx
+++ b/libs/tup-components/src/projects/details/grants/ProjectGrantFormFields.tsx
@@ -5,6 +5,7 @@ import { FormikInput, FormikSelect } from '@tacc/core-components';
 import { LoadingSpinner } from '@tacc/core-components';
 
 import styles from './ProjectGrantForm.module.css';
+import { Field } from 'formik';
 
 const ProjectGrantFormFields: React.FC = () => {
   const scienceFields = useProjectScienceField().data ?? [];
@@ -12,33 +13,58 @@ const ProjectGrantFormFields: React.FC = () => {
   return (
     <>
       <div className={styles['title-row']}>
-        <FormikInput name="title" label="Title" required />
-        <FormikInput name="grantNumber" label="Grant Number" />
+        <Field component={FormikInput} name="title" label="Title" required />
+        <Field
+          component={FormikInput}
+          name="grantNumber"
+          label="Grant Number"
+        />
       </div>
-      <FormikInput name="piName" label="PI Name" required />
+      <Field component={FormikInput} name="piName" label="PI Name" required />
 
-      <FormikSelect label="Field of Science" name="fieldId" required>
+      <Field
+        component={FormikSelect}
+        label="Field of Science"
+        name="fieldId"
+        required
+      >
         {scienceFields.map((field) => (
           <option key={field.id} value={field.id}>
             {[...new Array(field.depth)].map((_) => '--- ')}
             {field.id === 1 ? 'Select Field of Science' : field.name}
           </option>
         ))}
-      </FormikSelect>
-      <FormikInput name="fundingAgency" label="Funding Agency" />
+      </Field>
+      <Field
+        component={FormikInput}
+        name="fundingAgency"
+        label="Funding Agency"
+      />
 
-      <FormikInput name="awardNumber" label="Award Number" />
-      <FormikInput
+      <Field component={FormikInput} name="awardNumber" label="Award Number" />
+      <Field
+        component={FormikInput}
         name="awardAmount"
         label="Award Amount"
         description="Please provide a number value; do not use commas.
                             This information will not be displayed publicly"
       />
       <div className={styles['date-row']}>
-        <FormikInput name="start" label="Start Date" type="date" />
-        <FormikInput name="end" label="End Date" type="date" />
+        <Field
+          component={FormikInput}
+          name="start"
+          label="Start Date"
+          type="date"
+        />
+        <Field
+          component={FormikInput}
+          name="end"
+          label="End Date"
+          type="date"
+        />
       </div>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="nsfStatusCode"
         label="NSF Status Code"
         description="Typical status codes are: Pending, Recommended,
diff --git a/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx b/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx
index 92d1b4457..fa902f79b 100644
--- a/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx
+++ b/libs/tup-components/src/projects/details/publications/ProjectPublicationFormFIelds.tsx
@@ -7,19 +7,31 @@ import styles from './ProjectPublicationForm.module.css';
 const ProjectPublicationFormFields: React.FC = () => {
   return (
     <>
-      <FormikInput name="title" label="Publication Title" required />
-      <FormikInput
+      <Field
+        component={FormikInput}
+        name="title"
+        label="Publication Title"
+        required
+      />
+      <Field
+        component={FormikInput}
         name="authors"
         label="Authors"
         required
         description="Separate multiple authors with a comma"
       />
       <div className={styles['form-row']}>
-        <FormikInput name="yearPublished" label="Year Published" required />
-        <FormikInput name="publisher" label="Publisher" />
-        <FormikInput name="venue" label="Venue" />
+        <Field
+          component={FormikInput}
+          name="yearPublished"
+          label="Year Published"
+          required
+        />
+        <Field component={FormikInput} name="publisher" label="Publisher" />
+        <Field component={FormikInput} name="venue" label="Venue" />
       </div>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="url"
         label="URL"
         description="Provide a URL for the publication"
diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateForm.tsx b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateForm.tsx
index 93cb9a5a8..a70e4986c 100644
--- a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateForm.tsx
+++ b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateForm.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Formik, Form, FormikHelpers } from 'formik';
+import { Formik, Form, FormikHelpers, Field } from 'formik';
 //import ReCAPTCHA from 'react-google-recaptcha';
 import { useProfile, useTicketCreate } from '@tacc/tup-hooks';
 import {
@@ -90,7 +90,12 @@ export const TicketCreateForm: React.FC = () => {
     >
       {({ isValid }) => (
         <Form className={styles['ticket-create-form']} id="ticket-create-form">
-          <FormikSelect name="category" label="Category" required>
+          <Field
+            component={FormikSelect}
+            name="category"
+            label="Category"
+            required
+          >
             <option value="">Please Choose One</option>
             <option>Allocations</option>
             <option>Running Jobs or Using TACC Resources</option>
@@ -98,8 +103,13 @@ export const TicketCreateForm: React.FC = () => {
             <option>Multi-factor Authentication</option>
             <option>Arecibo Data</option>
             <option>Other</option>
-          </FormikSelect>
-          <FormikSelect name="resource" label="System/Resource" required>
+          </Field>
+          <Field
+            component={FormikSelect}
+            name="resource"
+            label="System/Resource"
+            required
+          >
             <option value="">Please Choose One</option>
             <option>Corral (corral-login.tacc.utexas.edu)</option>
             <option>Corral-Protected(corral-protected.tacc.utexas.edu)</option>
@@ -115,9 +125,16 @@ export const TicketCreateForm: React.FC = () => {
             <option>Cloud and Interactive Computing (Abaco API)</option>
             <option>Cloud and Interactive Computing (JupyterHub)</option>
             <option>Other</option>
-          </FormikSelect>
-          <FormikInput name="subject" label="Subject" required description="" />
-          <FormikTextarea
+          </Field>
+          <Field
+            component={FormikInput}
+            name="subject"
+            label="Subject"
+            required
+            description=""
+          />
+          <Field
+            component={FormikTextarea}
             name="description"
             label="Problem Description"
             rows={4}
@@ -126,7 +143,8 @@ export const TicketCreateForm: React.FC = () => {
                   reports"
           />
 
-          <FormikFileInput
+          <Field
+            component={FormikFileInput}
             name="files"
             label="Attach Files"
             description="Error reports and screenshots can be helpful for diagnostics"
@@ -136,14 +154,16 @@ export const TicketCreateForm: React.FC = () => {
           />
 
           <div className={styles['form-row']}>
-            <FormikInput
+            <Field
+              component={FormikInput}
               name="first_name"
               label="First Name"
               required
               disabled={isAuthenticated}
               description=""
             />
-            <FormikInput
+            <Field
+              component={FormikInput}
               name="last_name"
               label="Last Name"
               required
@@ -152,7 +172,8 @@ export const TicketCreateForm: React.FC = () => {
             />
           </div>
           <div className={styles['form-row']}>
-            <FormikInput
+            <Field
+              component={FormikInput}
               name="email"
               label="Email"
               type="email"
@@ -161,7 +182,8 @@ export const TicketCreateForm: React.FC = () => {
               description=""
             />
 
-            <FormikInput
+            <Field
+              component={FormikInput}
               name="cc"
               label="Cc"
               required={false}
diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
index 109914c02..e726572e7 100644
--- a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
+++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
@@ -84,7 +84,8 @@ export const TicketReplyForm: React.FC<{
 
         return (
           <Form className="ticket-reply-form">
-            <FormikTextarea
+            <Field
+              component={FormikTextarea}
               rows={4}
               name="text"
               label="Reply"
@@ -92,7 +93,8 @@ export const TicketReplyForm: React.FC<{
               style={{ maxWidth: '100%' }}
               required={!isCheckedForResolve}
             />
-            <FormikFileInput
+            <Field
+              component={FormikFileInput}
               name="files"
               required={false}
               label="Upload Files"