import type { FormikErrors , FormikProps } from 'formik' ; import React from 'react' ; import type { IWizardPageComponent } from '@spinnaker/core' ; import { FormikFormField , FormValidator , HelpField , ReactSelectInput , TextInput } from '@spinnaker/core' ; import { awsArnValidator } from '../../aws.validators' ; import type { IAmazonFunction } from '../../domain' ; import type { IAmazonFunctionUpsertCommand } from '../../index' ; export interface IFunctionDebugAndErrorHandlingProps { formik : FormikProps < IAmazonFunctionUpsertCommand > ; isNew ? : boolean ; functionDef : IAmazonFunction ; } export class FunctionDebugAndErrorHandling extends React . Component < IFunctionDebugAndErrorHandlingProps > implements IWizardPageComponent < IAmazonFunctionUpsertCommand > { constructor ( props ) { super ( props ) ; } public validate = ( values ) : FormikErrors < IAmazonFunctionUpsertCommand > => { const validator = new FormValidator ( values ) ; validator . field ( 'deadLetterConfig.targetArn' , 'Target ARN' ) . optional ( ) . withValidators ( awsArnValidator ) ; return validator . validateForm ( ) ; } ; public render ( ) { return ( < div className = "container-fluid form-horizontal " > Dead Letter Config < FormikFormField name = "deadLetterConfig.targetArn" label = "Target ARN" help = { < HelpField id = "aws.function.deadletterqueue" / > } input = { ( props ) => < TextInput { ... props } / > } /> X - Ray Tracing < FormikFormField name = "tracingConfig.mode" label = "Mode" help = { < HelpField id = "aws.function.tracingConfig.mode" / > } input = { ( props ) => < ReactSelectInput { ... props } stringOptions = { [ 'Active' , 'PassThrough' ] } clearable = { true } / > } /> < /div>); } }