feat(app): validate factory mode slideout input (#15025)

add validation and errors to input on factory mode slideout initial step

closes PLAT-281

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx

@@ -28,6 +28,7 @@ import { FileUpload } from '../../../../../molecules/FileUpload'
 import { UploadInput } from '../../../../../molecules/UploadInput'
 import { restartRobot } from '../../../../../redux/robot-admin'
 
+import type { FieldError, Resolver } from 'react-hook-form'
 import type { RobotSettingsField } from '@opentrons/api-client'
 import type { Dispatch } from '../../../../../redux/types'
 
@@ -36,17 +37,19 @@ interface FactoryModeSlideoutProps {
   isRobotBusy: boolean
   onCloseClick: () => void
   robotName: string
+  sn: string | null
 }
 
 interface FormValues {
-  passwordInput: string
+  factoryModeInput: string
 }
 
 export function FactoryModeSlideout({
   isExpanded,
   isRobotBusy,
   onCloseClick,
   robotName,
+  sn,
 }: FactoryModeSlideoutProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'shared', 'branded'])
 
@@ -58,6 +61,8 @@ export function FactoryModeSlideout({
   )
   const isOEMMode = oemModeSetting?.value ?? null
 
+  const last = sn?.substring(sn.length - 4)
+
   const [currentStep, setCurrentStep] = React.useState<number>(1)
   const [toggleValue, setToggleValue] = React.useState<boolean>(false)
   const [file, setFile] = React.useState<File | null>(null)
@@ -86,22 +91,54 @@ export function FactoryModeSlideout({
     },
   })
 
+  const validate = (
+    data: FormValues,
+    errors: Record<string, FieldError>
+  ): Record<string, FieldError> => {
+    const factoryModeInput = data.factoryModeInput
+    let errorMessage: string | undefined
+    if (factoryModeInput !== last) {
+      errorMessage = t('invalid_password')
+    }
+
+    const updatedErrors =
+      errorMessage != null
+        ? {
+            ...errors,
+            factoryModeInput: {
+              type: 'error',
+              message: errorMessage,
+            },
+          }
+        : errors
+    return updatedErrors
+  }
+
+  const resolver: Resolver<FormValues> = values => {
+    let errors = {}
+    errors = validate(values, errors)
+    return { values, errors }
+  }
+
   const {
-    handleSubmit,
+    clearErrors,
     control,
     formState: { errors },
-    trigger,
+    handleSubmit,
   } = useForm({
     defaultValues: {
-      passwordInput: '',
+      factoryModeInput: '',
     },
+    mode: 'onSubmit',
+    resolver,
+    reValidateMode: 'onSubmit',
   })
-  const onSubmit = (data: FormValues): void => {
+
+  const onSubmit = (): void => {
     setCurrentStep(2)
   }
 
   const handleSubmitFactoryPassword = (): void => {
-    // TODO: validation and errors: PLAT-281
     void handleSubmit(onSubmit)()
   }
 
@@ -153,7 +190,11 @@ export function FactoryModeSlideout({
       footer={
         <>
           {currentStep === 1 ? (
-            <PrimaryButton onClick={handleSubmitFactoryPassword} width="100%">
+            <PrimaryButton
+              disabled={errors.factoryModeInput != null}
+              onClick={handleSubmitFactoryPassword}
+              width="100%"
+            >
               {t('shared:next')}
             </PrimaryButton>
           ) : null}
@@ -182,15 +223,15 @@ export function FactoryModeSlideout({
         <Flex flexDirection={DIRECTION_COLUMN}>
           <Controller
             control={control}
-            name="passwordInput"
+            name="factoryModeInput"
             render={({ field, fieldState }) => (
               <InputField
-                id="passwordInput"
-                name="passwordInput"
+                id="factoryModeInput"
+                name="factoryModeInput"
                 type="text"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   field.onChange(e)
-                  trigger('passwordInput')
+                  clearErrors()
                 }}
                 value={field.value}
                 error={fieldState.error?.message && ' '}
@@ -199,13 +240,13 @@ export function FactoryModeSlideout({
               />
             )}
           />
-          {errors.passwordInput != null ? (
+          {errors.factoryModeInput != null ? (
             <StyledText
               as="label"
               color={COLORS.red50}
               marginTop={SPACING.spacing4}
             >
-              {errors.passwordInput.message}
+              {errors.factoryModeInput.message}
             </StyledText>
           ) : null}
         </Flex>

app/src/organisms/Devices/RobotSettings/AdvancedTab/FactoryMode.tsx

@@ -17,11 +17,13 @@ import { TertiaryButton } from '../../../../atoms/buttons'
 interface FactoryModeProps {
   isRobotBusy: boolean
   setShowFactoryModeSlideout: React.Dispatch<React.SetStateAction<boolean>>
+  sn: string | null
 }
 
 export function FactoryMode({
   isRobotBusy,
   setShowFactoryModeSlideout,
+  sn,
 }: FactoryModeProps): JSX.Element {
   const { t } = useTranslation('device_settings')
 
@@ -37,7 +39,7 @@ export function FactoryMode({
         </StyledText>
       </Box>
       <TertiaryButton
-        disabled={isRobotBusy}
+        disabled={isRobotBusy || sn == null}
         marginLeft={SPACING_AUTO}
         onClick={() => {
           setShowFactoryModeSlideout(true)

app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx

@@ -42,7 +42,7 @@ import { DeviceResetSlideout } from './AdvancedTab/AdvancedTabSlideouts/DeviceRe
 import { DeviceResetModal } from './AdvancedTab/AdvancedTabSlideouts/DeviceResetModal'
 import { FactoryModeSlideout } from './AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout'
 import { handleUpdateBuildroot } from './UpdateBuildroot'
-import { UNREACHABLE } from '../../../redux/discovery'
+import { getRobotSerialNumber, UNREACHABLE } from '../../../redux/discovery'
 import { getTopPortalEl } from '../../../App/portal'
 import { useIsEstopNotDisengaged } from '../../../resources/devices/hooks/useIsEstopNotDisengaged'
 
@@ -89,6 +89,7 @@ export function RobotSettingsAdvanced({
     getRobotSettings(state, robotName)
   )
   const reachable = robot?.status !== UNREACHABLE
+  const sn = robot?.status != null ? getRobotSerialNumber(robot) : null
 
   const [isRobotReachable, setIsRobotReachable] = React.useState<boolean>(
     reachable
@@ -143,6 +144,7 @@ export function RobotSettingsAdvanced({
             isRobotBusy={isRobotBusy || isEstopNotDisengaged}
             onCloseClick={() => setShowFactoryModeSlideout(false)}
             robotName={robotName}
+            sn={sn}
           />
         )}
         {showDeviceResetSlideout && (
@@ -215,6 +217,7 @@ export function RobotSettingsAdvanced({
             <FactoryMode
               isRobotBusy={isRobotBusy || isEstopNotDisengaged}
               setShowFactoryModeSlideout={setShowFactoryModeSlideout}
+              sn={sn}
             />
           </>
         ) : null}