import React from 'react' ; import { useActions , useValues } from 'kea' ; import { EuiButton , EuiButtonEmpty , EuiFieldText , EuiFormRow , EuiModal , EuiModalBody , EuiModalFooter , EuiModalHeader , EuiModalHeaderTitle , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { CANCEL_BUTTON } from '../../../constants' ; import { GroupsLogic } from '../groups_logic' ; const ADD_GROUP_HEADER = i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.groups.addGroup.heading' , { defaultMessage : 'Add a group' , } ) ; const ADD_GROUP_SUBMIT = i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.groups.addGroup.submit.action' , { defaultMessage : 'Add Group' , } ) ; const ADD_GROUP_LABEL = i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.groups.addGroup.label' , { defaultMessage : 'Group name' , } ) ; export const AddGroupModal = ( ) => { const { closeNewGroupModal , saveNewGroup , setNewGroupName } = useActions ( GroupsLogic ) ; const { newGroupNameErrors , newGroupName } = useValues ( GroupsLogic ) ; const isInvalid = newGroupNameErrors . length > 0 ; const handleFormSumbit = ( e ) => { e . preventDefault ( ) ; saveNewGroup ( ) ; } ; return ( < EuiModal onClose = { closeNewGroupModal } initialFocus = ".euiFieldText" > < form onSubmit = { handleFormSumbit } > < EuiModalHeader > < EuiModalHeaderTitle > { ADD_GROUP_HEADER } < /EuiModalHeaderTitle> < /EuiModalHeader> < EuiModalBody > < EuiFormRow isInvalid = { isInvalid } error = { newGroupNameErrors } label = { ADD_GROUP_LABEL } > < EuiFieldText isInvalid = { isInvalid } value = { newGroupName } data - test - subj = "AddGroupInput" onChange = { ( e ) => setNewGroupName ( e . target . value ) } /> < /EuiFormRow> < /EuiModalBody> < EuiModalFooter > < EuiButtonEmpty onClick = { closeNewGroupModal } > { CANCEL_BUTTON } < /EuiButtonEmpty> < EuiButton disabled = { ! newGroupName } onClick = { saveNewGroup } fill data - test - subj = "AddGroupSubmit" > { ADD_GROUP_SUBMIT } < /EuiButton> < /EuiModalFooter> < /form> < /EuiModal>); } ;