Allow i18n keys to be overridden by the settings + config store; fixes #1851

__tests__/src/components/App.test.js

@@ -7,6 +7,7 @@ import Workspace from '../../../src/containers/Workspace';
 import WorkspaceAdd from '../../../src/containers/WorkspaceAdd';
 import App from '../../../src/components/App';
 import settings from '../../../src/config/settings';
+import i18n from '../../../src/i18n';
 
 /** */
 function createWrapper(props) {
@@ -15,6 +16,7 @@ function createWrapper(props) {
       isFullscreenEnabled={false}
       setWorkspaceFullscreen={() => {}}
       theme={settings.theme}
+      translations={{}}
       classes={{}}
       {...props}
     />,
@@ -43,6 +45,11 @@ describe('App', () => {
     expect(Object.keys(theme).length).toBeGreaterThan(10);
   });
 
+  it('sets up translations based on the config passed in', () => {
+    createWrapper({ translations: { en: { off: 'on' } } });
+    expect(i18n.t('off')).toEqual('on');
+  });
+
   it('should pass setWorkspaceFullscreen to Fullscreen.onChange', () => {
     const mockFn = jest.fn();
     const wrapper = createWrapper({ setWorkspaceFullscreen: mockFn });

src/components/App.js

@@ -7,6 +7,7 @@ import WorkspaceControlPanel from './WorkspaceControlPanel';
 import Workspace from '../containers/Workspace';
 import WorkspaceAdd from '../containers/WorkspaceAdd';
 import ns from '../config/css-ns';
+import i18n from '../i18n';
 
 /**
  * This is the top level Mirador component.
@@ -20,9 +21,13 @@ class App extends Component {
   render() {
     const {
       isFullscreenEnabled, setWorkspaceFullscreen, classes,
-      isWorkspaceAddVisible, theme,
+      isWorkspaceAddVisible, theme, translations,
     } = this.props;
 
+    Object.keys(translations).forEach((lng) => {
+      i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
+    });
+
     return (
       <div className={classNames(classes.background, ns('app'))}>
         <MuiThemeProvider theme={createMuiTheme(theme)}>
@@ -45,6 +50,7 @@ class App extends Component {
 
 App.propTypes = {
   theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  translations: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isFullscreenEnabled: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
   setWorkspaceFullscreen: PropTypes.func.isRequired,

src/config/settings.js

@@ -7,6 +7,8 @@ export default {
       useNextVariants: true // set so that console deprecation warning is removed
     }
   },
+  translations: {
+  },
   window: {
     defaultView: 'single',
   },

src/containers/App.js

@@ -11,6 +11,7 @@ import App from '../components/App';
 const mapStateToProps = state => (
   {
     theme: state.config.theme,
+    translations: state.config.translations,
     isFullscreenEnabled: state.workspace.isFullscreenEnabled,
     isWorkspaceAddVisible: state.workspace.isWorkspaceAddVisible,
   }