feat: add prompt to save work

Add prompt to save when user clicks the "Back to {locale} {locale-code}
Sim List" button.

See #341.

Part of phetsims/qa#869.

src/client/components/TranslationForm.jsx

@@ -16,7 +16,7 @@ import React, {
   useEffect,
   useState
 } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import publicConfig from '../../common/publicConfig.js';
 import makeValidationSchema from '../js/makeValidationSchema.js';
 import saveTranslation from '../js/saveTranslation.js';
@@ -55,6 +55,14 @@ const TranslationForm = () => {
     }
   }, [ websiteUserData ] );
 
+  const navigate = useNavigate();
+  const handleBackToSimList = () => {
+    const message = 'If you have unsaved work, it will be lost. Are you sure you want to proceed?';
+    if ( window.confirm( message ) ) {
+      navigate( `/translate/${params.locale}` );
+    }
+  };
+
   const [ isDisabled, setIsDisabled ] = useState( false );
   const [ buttonId, setButtonId ] = useState( '' );
   const handleButtonClick = evt => {
@@ -97,7 +105,7 @@ const TranslationForm = () => {
           locale={params.locale}
           simTitle={simTitle}
         />
-        <Link to={`/translate/${params.locale}`}>Back to {localeName} ({params.locale}) Sim List</Link>
+        <button onClick={handleBackToSimList} className='btn btn-primary'>Back to {localeName} ({params.locale}) Sim List</button>
         <Formik
           initialValues={translationFormData}
           validationSchema={validationSchema}