From f27fccdf63eefe0be47dcda839cfcf9997571a95 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 12 Aug 2024 13:25:13 +0900
Subject: [PATCH 1/2] refactor(components, app): move inputfile from app to
 components

move inputfield from app to components and rename inputfield in components into legacyinputfield

close AUTH-646
---
 .../ConnectNetwork/ConnectModal/TextField.tsx          |  4 ++--
 components/src/forms/InputField.stories.tsx            |  2 +-
 .../src/forms/{InputField.tsx => LegacyInputField.tsx} |  6 +++---
 components/src/forms/index.ts                          |  2 +-
 .../src/labware-creator/components/TextField.tsx       | 10 +++++-----
 protocol-designer/src/components/EditableTextField.tsx |  4 ++--
 protocol-designer/src/components/FilePage.tsx          |  8 ++++----
 .../LiquidPlacementForm/LiquidPlacementForm.tsx        |  4 ++--
 .../src/components/LiquidsPage/LiquidEditForm.tsx      |  6 +++---
 .../fields/FlowRateField/FlowRateInput.tsx             |  8 ++++----
 .../components/StepEditForm/fields/ProfileItemRows.tsx |  4 ++--
 .../src/components/StepEditForm/fields/TextField.tsx   |  4 ++--
 .../fields/TipPositionField/TipPositionModal.tsx       |  8 ++++----
 .../fields/TipPositionField/ZTipPositionModal.tsx      |  4 ++--
 .../StepEditForm/fields/TipPositionField/index.tsx     |  4 ++--
 .../fields/TipWellSelectionField/index.tsx             |  4 ++--
 .../fields/WellSelectionField/WellSelectionField.tsx   |  4 ++--
 .../src/components/modals/MoreOptionsModal.tsx         |  4 ++--
 18 files changed, 45 insertions(+), 45 deletions(-)
 rename components/src/forms/{InputField.tsx => LegacyInputField.tsx} (95%)

diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx
index 961e47eb093..4cfa4c0c48c 100644
--- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx
+++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {
-  InputField,
+  LegacyInputField,
   DeprecatedCheckboxField,
   INPUT_TYPE_TEXT,
   INPUT_TYPE_PASSWORD,
@@ -37,7 +37,7 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
 
   return (
     <FormRow label={label} labelFor={id}>
-      <InputField
+      <LegacyInputField
         {...{ className, type, id, name, value, error, onChange, onBlur }}
       />
       {isPassword && (
diff --git a/components/src/forms/InputField.stories.tsx b/components/src/forms/InputField.stories.tsx
index c6d98531ff1..2ca998acd2f 100644
--- a/components/src/forms/InputField.stories.tsx
+++ b/components/src/forms/InputField.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Box, SIZE_6 } from '@opentrons/components'
 
-import { InputField as InputFieldComponent } from './InputField'
+import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
 
 import type { Story, Meta } from '@storybook/react'
 
diff --git a/components/src/forms/InputField.tsx b/components/src/forms/LegacyInputField.tsx
similarity index 95%
rename from components/src/forms/InputField.tsx
rename to components/src/forms/LegacyInputField.tsx
index 899594bc187..6a4a5d2895b 100644
--- a/components/src/forms/InputField.tsx
+++ b/components/src/forms/LegacyInputField.tsx
@@ -8,7 +8,7 @@ export const INPUT_TYPE_PASSWORD: 'password' = 'password'
 
 // TODO: Ian 2018-09-14 remove 'label' prop when IngredientPropertiesForm gets updated
 
-export interface InputFieldProps {
+export interface LegacyInputFieldProps {
   /** field is disabled if value is true */
   disabled?: boolean
   /** change handler */
@@ -57,7 +57,7 @@ export interface InputFieldProps {
  * @deprecated Use `InputField` in App/atoms instead
  */
 
-export function InputField(props: InputFieldProps): JSX.Element {
+export function LegacyInputField(props: LegacyInputFieldProps): JSX.Element {
   const error = props.error != null
   const labelClass = cx(styles.form_field, props.className, {
     [styles.error]: error,
@@ -88,7 +88,7 @@ export function InputField(props: InputFieldProps): JSX.Element {
 }
 
 // TODO(mc, 2018-02-21): maybe simplify further and split out?
-function Input(props: InputFieldProps): JSX.Element {
+function Input(props: LegacyInputFieldProps): JSX.Element {
   const error = props.error != null
   const value = props.isIndeterminate ? '' : props.value ?? ''
   const placeHolder = props.isIndeterminate ? '-' : props.placeholder
diff --git a/components/src/forms/index.ts b/components/src/forms/index.ts
index bdadbdaba99..c8cd6e2b0f0 100644
--- a/components/src/forms/index.ts
+++ b/components/src/forms/index.ts
@@ -1,7 +1,7 @@
 export * from './DeprecatedCheckboxField'
 export * from './DropdownField'
 export * from './FormGroup'
-export * from './InputField'
+export * from './LegacyInputField'
 export * from './RadioGroup'
 export * from './Select'
 export * from './SelectField'
diff --git a/labware-library/src/labware-creator/components/TextField.tsx b/labware-library/src/labware-creator/components/TextField.tsx
index 37f2a6541f3..6072c96651f 100644
--- a/labware-library/src/labware-creator/components/TextField.tsx
+++ b/labware-library/src/labware-creator/components/TextField.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Field } from 'formik'
-import { InputField } from '@opentrons/components'
+import { LegacyInputField } from '@opentrons/components'
 import { reportFieldEdit } from '../analyticsUtils'
 import { getIsHidden } from '../formSelectors'
 import { getLabel } from '../fields'
-import type { InputFieldProps } from '@opentrons/components'
+import type { LegacyInputFieldProps } from '@opentrons/components'
 import type { LabwareFields } from '../fields'
 import type { FieldProps } from 'formik'
 import fieldStyles from './fieldStyles.module.css'
@@ -13,9 +13,9 @@ interface Props {
   name: keyof LabwareFields
   label?: string
   placeholder?: string
-  caption?: InputFieldProps['caption']
+  caption?: LegacyInputFieldProps['caption']
   inputMasks?: Array<(prevValue: string, update: string) => string>
-  units?: InputFieldProps['units']
+  units?: LegacyInputFieldProps['units']
 }
 
 // NOTE(Ian 2019-07-23): per-field hide-when-autofilled is not yet necessary,
@@ -44,7 +44,7 @@ export const TextField = (props: Props): JSX.Element => {
           <div className={fieldStyles.field_wrapper}>
             <label className={fieldStyles.field_label}>
               {label ?? getLabel(props.name, form.values as LabwareFields)}
-              <InputField
+              <LegacyInputField
                 name={field.name}
                 value={field.value}
                 caption={caption}
diff --git a/protocol-designer/src/components/EditableTextField.tsx b/protocol-designer/src/components/EditableTextField.tsx
index e17e1ab1601..1b5adcb56be 100644
--- a/protocol-designer/src/components/EditableTextField.tsx
+++ b/protocol-designer/src/components/EditableTextField.tsx
@@ -1,6 +1,6 @@
 // TODO: Ian 2018-10-30 if we like this, add it to components library
 import * as React from 'react'
-import { ClickOutside, Icon, InputField } from '@opentrons/components'
+import { ClickOutside, Icon, LegacyInputField } from '@opentrons/components'
 import styles from './editableTextField.module.css'
 
 interface Props {
@@ -53,7 +53,7 @@ export function EditableTextField(props: Props): JSX.Element {
             onSubmit={handleFormSubmit}
             ref={ref}
           >
-            <InputField
+            <LegacyInputField
               autoFocus
               value={transientValue}
               onChange={updateValue}
diff --git a/protocol-designer/src/components/FilePage.tsx b/protocol-designer/src/components/FilePage.tsx
index b58db0fb835..59757136cb9 100644
--- a/protocol-designer/src/components/FilePage.tsx
+++ b/protocol-designer/src/components/FilePage.tsx
@@ -13,7 +13,7 @@ import {
   InstrumentGroup,
   OutlineButton,
   DeprecatedPrimaryButton,
-  InputField,
+  LegacyInputField,
 } from '@opentrons/components'
 import { resetScrollElements } from '../ui/steps/utils'
 import { EditModulesCard } from './modules'
@@ -149,7 +149,7 @@ export const FilePage = (): JSX.Element => {
                 control={control}
                 name="protocolName"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     placeholder="Untitled"
                     name="protocolName"
                     value={protocolName}
@@ -170,7 +170,7 @@ export const FilePage = (): JSX.Element => {
                 control={control}
                 name="author"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="author"
                     value={author}
                     onChange={field.onChange}
@@ -191,7 +191,7 @@ export const FilePage = (): JSX.Element => {
               control={control}
               name="description"
               render={({ field }) => (
-                <InputField
+                <LegacyInputField
                   name="description"
                   value={description}
                   onChange={field.onChange}
diff --git a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx
index 7c403bea2a7..a49844b07c4 100644
--- a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx
+++ b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx
@@ -11,7 +11,7 @@ import {
   FormGroup,
   OutlineButton,
   DeprecatedPrimaryButton,
-  InputField,
+  LegacyInputField,
 } from '@opentrons/components'
 import styles from './LiquidPlacementForm.module.css'
 import formStyles from '../forms/forms.module.css'
@@ -212,7 +212,7 @@ export const LiquidPlacementForm = (): JSX.Element | null => {
                 required: true,
               }}
               render={({ field }) => (
-                <InputField
+                <LegacyInputField
                   name="volume"
                   units={t('application:units.microliter')}
                   value={volume}
diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
index ad1766b1eb3..6fae38d4fb5 100644
--- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
+++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -8,7 +8,7 @@ import {
   Card,
   DeprecatedCheckboxField,
   FormGroup,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   DeprecatedPrimaryButton,
   Flex,
@@ -133,7 +133,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
                 control={control}
                 name="name"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="name"
                     error={
                       touchedFields.name != null ? errors.name?.message : null
@@ -153,7 +153,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
                 control={control}
                 name="description"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="description"
                     value={description}
                     onChange={field.onChange}
diff --git a/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx b/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx
index 06862663e97..6aa1d8f01c0 100644
--- a/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx
@@ -6,7 +6,7 @@ import {
   AlertModal,
   FormGroup,
   RadioGroup,
-  InputField,
+  LegacyInputField,
   Flex,
   useHoverTooltip,
   Tooltip,
@@ -147,7 +147,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
   }
 
   const FlowRateInputField = (
-    <InputField
+    <LegacyInputField
       disabled={disabled}
       caption={rangeDescription}
       error={errorMessage}
@@ -215,7 +215,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
     <>
       {flowRateType === 'blowout' ? (
         <Flex {...targetProps}>
-          <InputField
+          <LegacyInputField
             className={className || stepFormStyles.small_field}
             disabled={disabled}
             isIndeterminate={isIndeterminate}
@@ -229,7 +229,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
         </Flex>
       ) : (
         <FormGroup label={label || DEFAULT_LABEL} disabled={disabled}>
-          <InputField
+          <LegacyInputField
             className={className || stepFormStyles.small_field}
             disabled={disabled}
             isIndeterminate={isIndeterminate}
diff --git a/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx b/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx
index 4917dbb2d7c..08720b95cf5 100644
--- a/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import cx from 'classnames'
 import {
   Icon,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   Tooltip,
   useConditionalConfirm,
@@ -270,7 +270,7 @@ const ProfileField = (props: ProfileFieldProps): JSX.Element => {
   }
   return (
     <div className={styles.step_input_wrapper}>
-      <InputField
+      <LegacyInputField
         className={cx(styles.step_input, className)}
         error={errorToShow}
         units={units}
diff --git a/protocol-designer/src/components/StepEditForm/fields/TextField.tsx b/protocol-designer/src/components/StepEditForm/fields/TextField.tsx
index 6cbd4ad6357..0aa76ce59f0 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TextField.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TextField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { InputField } from '@opentrons/components'
+import { LegacyInputField } from '@opentrons/components'
 import type { FieldProps } from '../types'
 
 type TextFieldProps = FieldProps & {
@@ -20,7 +20,7 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
   } = props
 
   return (
-    <InputField
+    <LegacyInputField
       {...otherProps}
       error={errorToShow}
       onBlur={onFieldBlur}
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
index 3c90930da75..081606c516d 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
@@ -6,7 +6,7 @@ import {
   AlertModal,
   DIRECTION_COLUMN,
   Flex,
-  InputField,
+  LegacyInputField,
   RadioGroup,
   SPACING,
   LegacyStyledText,
@@ -245,7 +245,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.x_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: roundedXMin,
             max: roundedXMax,
@@ -267,7 +267,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.y_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: roundedYMin,
             max: roundedYMax,
@@ -285,7 +285,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.z_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: minMmFromBottom,
             max: maxMmFromBottom,
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx
index db2972c06e2..45b16cb228a 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx
@@ -7,7 +7,7 @@ import {
   Flex,
   HandleKeypress,
   Icon,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   RadioGroup,
 } from '@opentrons/components'
@@ -160,7 +160,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
   }
 
   const TipPositionInputField = !isDefault && (
-    <InputField
+    <LegacyInputField
       caption={t('tip_position.caption', {
         min: minMm,
         max: maxMm,
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
index 8d8a7a866f0..a438f6b28e9 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
@@ -6,7 +6,7 @@ import {
   Flex,
   FormGroup,
   Icon,
-  InputField,
+  LegacyInputField,
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
@@ -185,7 +185,7 @@ export function TipPositionField(props: TipPositionFieldProps): JSX.Element {
             />
           </Flex>
         ) : (
-          <InputField
+          <LegacyInputField
             disabled={disabled}
             className={stepFormStyles.small_field}
             readOnly
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx b/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx
index 67507b8834f..da22156e5a1 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
-import { FormGroup, InputField } from '@opentrons/components'
+import { FormGroup, LegacyInputField } from '@opentrons/components'
 import { getPipetteEntities } from '../../../../step-forms/selectors'
 import { getNozzleType } from '../../utils'
 import { getMainPagePortalEl } from '../../../portals/MainPageModalPortal'
@@ -68,7 +68,7 @@ export function TipWellSelectionField(
         label={t('step_edit_form.wellSelectionLabel.wells')}
         className={styles.small_field}
       >
-        <InputField
+        <LegacyInputField
           readOnly
           error={errorToShow}
           name={name}
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx
index a97ef894d07..6f8a2009eb1 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { FormGroup, InputField } from '@opentrons/components'
+import { FormGroup, LegacyInputField } from '@opentrons/components'
 import { COLUMN } from '@opentrons/shared-data'
 import {
   actions as stepsActions,
@@ -80,7 +80,7 @@ export const WellSelectionField = (props: Props): JSX.Element => {
       : t('step_edit_form.wellSelectionLabel.wells')
   return (
     <FormGroup label={label} disabled={disabled} className={styles.small_field}>
-      <InputField
+      <LegacyInputField
         readOnly
         name={name}
         value={primaryWellCount ?? null}
diff --git a/protocol-designer/src/components/modals/MoreOptionsModal.tsx b/protocol-designer/src/components/modals/MoreOptionsModal.tsx
index bb48984953f..2d7cf078479 100644
--- a/protocol-designer/src/components/modals/MoreOptionsModal.tsx
+++ b/protocol-designer/src/components/modals/MoreOptionsModal.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   FormGroup,
-  InputField,
+  LegacyInputField,
   LegacyModal,
   OutlineButton,
 } from '@opentrons/components'
@@ -54,7 +54,7 @@ export function MoreOptionsModal(props: Props): JSX.Element {
           label={t('form:step_edit_form.field.step_name.label')}
           className={styles.form_group}
         >
-          <InputField
+          <LegacyInputField
             onChange={makeHandleChange('stepName')}
             value={String(formData.stepName)}
           />

From 4a7403b5a85c79ca8463ccb1e290956ecb701567 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 12 Aug 2024 08:25:34 -0400
Subject: [PATCH 2/2] address feedback

---
 components/src/forms/LegacyInputField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/forms/LegacyInputField.tsx b/components/src/forms/LegacyInputField.tsx
index 6a4a5d2895b..989f4509be3 100644
--- a/components/src/forms/LegacyInputField.tsx
+++ b/components/src/forms/LegacyInputField.tsx
@@ -54,7 +54,7 @@ export interface LegacyInputFieldProps {
 }
 
 /**
- * @deprecated Use `InputField` in App/atoms instead
+ * @deprecated Use `InputField`
  */
 
 export function LegacyInputField(props: LegacyInputFieldProps): JSX.Element {