feat: i18n user interface (#40306)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/formHelpers/BlockSaveButton.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 function BlockSaveButton(props) {
+  const { t } = useTranslation();
   return (
     <Button block={true} bsStyle='primary' {...props} type='submit'>
-      {props.children || 'Save'}
+      {props.children || t('buttons.save')}
     </Button>
   );
 }

client/src/components/formHelpers/BlockSaveButton.test.js

@@ -11,10 +11,10 @@ test('<BlockSaveButton /> snapshot', () => {
   expect(container).toMatchSnapshot();
 });
 
-test('Button text should default to "Save"', () => {
+test('Button text should default to the correct translation key', () => {
   const { getByRole } = render(<BlockSaveButton />);
 
-  expect(getByRole('button')).toHaveTextContent('Save');
+  expect(getByRole('button')).toHaveTextContent('buttons.save');
 });
 
 test('Button text should match "children"', () => {

client/src/components/formHelpers/__snapshots__/BlockSaveButton.test.js.snap

@@ -6,7 +6,7 @@ exports[`<BlockSaveButton /> snapshot 1`] = `
     class="btn btn-primary btn-block"
     type="submit"
   >
-    Save
+    buttons.save
   </button>
 </div>
 `;