import type { FormikProps } from 'formik' ; import React from 'react' ; import type { IWizardPageComponent } from '@spinnaker/core' ; import { SecurityGroupSelector } from '../securityGroups/SecurityGroupSelector' ; import { ServerGroupSecurityGroupsRemoved } from '../securityGroups/ServerGroupSecurityGroupsRemoved' ; import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service' ; export interface IServerGroupSecurityGroupsProps { formik : FormikProps < IAmazonServerGroupCommand > ; } export class ServerGroupSecurityGroups extends React . Component < IServerGroupSecurityGroupsProps > implements IWizardPageComponent < IAmazonServerGroupCommand > { public validate ( values ) { const errors = { } as any ; if ( values . viewState . dirty . securityGroups ) { errors . securityGroups = 'You must acknowledge removed security groups.' ; } return errors ; } private onChange = ( securityGroups ) => { this . props . formik . setFieldValue ( 'securityGroups' , securityGroups ) ; } ; private acknowledgeRemovedGroups = ( ) => { const { viewState } = this . props . formik . values ; viewState . dirty . securityGroups = null ; this . props . formik . setFieldValue ( 'viewState' , viewState ) ; } ; public render ( ) { const { values } = this . props . formik ; return ( < div className = "container-fluid form-horizontal" > < ServerGroupSecurityGroupsRemoved command = { values } onClear = { this . acknowledgeRemovedGroups } / > < SecurityGroupSelector command = { values } availableGroups = { values . backingData . filtered . securityGroups } groupsToEdit = { values . securityGroups } onChange = { this . onChange } / > < /div>); } }