import React , { useEffect } from 'react' ; import { Prompt } from 'react-router-dom' ; import { i18n } from '@kbn/i18n' ; const DEFAULT_MESSAGE_TEXT = i18n . translate ( 'xpack.enterpriseSearch.shared.unsavedChangesMessage' , { defaultMessage : 'Your changes have not been saved. Are you sure you want to leave?' , } ) ; interface Props { hasUnsavedChanges : boolean ; messageText ? : string ; } export const UnsavedChangesPrompt = ( { hasUnsavedChanges , messageText = DEFAULT_MESSAGE_TEXT , } ) => { useEffect ( ( ) => { const handler = ( event ) => { if ( hasUnsavedChanges ) { event . preventDefault ( ) ; event . returnValue = '' ; } } ; window . addEventListener ( 'beforeunload' , handler ) ; return ( ) => window . removeEventListener ( 'beforeunload' , handler ) ; } , [ hasUnsavedChanges ] ) ; return < Prompt when = { hasUnsavedChanges } message = { messageText } / > ; } ;