import React , { useEffect , useState , FormEvent } from 'react' ; import { useLocation } from 'react-router-dom' ; import { Location } from 'history' ; import { useActions , useValues } from 'kea' ; import { EuiButton , EuiFlexGroup , EuiFlexItem , EuiFormRow , EuiSpacer } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { parseQueryParams } from '../../../../../shared/query_params' ; import { AddSourceLogic } from './add_source_logic' ; interface SourceQueryParams { sourceId : string ; } interface ReauthenticateProps { name : string ; header : React . ReactNode ; } export const Reauthenticate = ( { name , header } ) => { const { search } = useLocation ( ) as Location ; const { sourceId } = parseQueryParams ( search ) as unknown as SourceQueryParams ; const [ formLoading , setFormLoading ] = useState ( false ) ; const { getSourceReConnectData } = useActions ( AddSourceLogic ) ; const { sourceConnectData : { oauthUrl } , } = useValues ( AddSourceLogic ) ; useEffect ( ( ) => { getSourceReConnectData ( sourceId ) ; } , [ ] ) ; const handleFormSubmit = ( e ) => { e . preventDefault ( ) ; setFormLoading ( true ) ; window . location . replace ( oauthUrl ) ; } ; return ( < > { header } < EuiSpacer / > < form onSubmit = { handleFormSubmit } > < EuiFlexGroup direction = "row" alignItems = "flexStart" justifyContent = "spaceBetween" gutterSize = "xl" responsive = { false } > < EuiFlexItem grow = { 1 } className = "adding-a-source__connect-an-instance" > < p > { i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.contentSource.reAuthenticate.body' , { defaultMessage : 'Your {name} credentials are no longer valid. Please reauthenticate with the original credentials to resume content syncing.' , values : { name } , } ) } < /p> < /EuiFlexItem> < /EuiFlexGroup> < EuiSpacer / > < EuiFormRow > < EuiButton color = "primary" fill type = "submit" isLoading = { ! oauthUrl || formLoading } > { i18n . translate ( 'xpack.enterpriseSearch.workplaceSearch.contentSource.reAuthenticate.button' , { defaultMessage : 'Reauthenticate {name}' , values : { name } , } ) } < /EuiButton> < /EuiFormRow> < /form> < />); } ;