New: Localization Framework

frontend/src/Settings/UI/UISettings.js

@@ -10,6 +10,7 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { inputTypes } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
 import styles from './UISettings.css';
 
 export const firstDayOfWeekOptions = [
@@ -56,9 +57,12 @@ class UISettings extends Component {
       hasSettings,
       onInputChange,
       onSavePress,
+      languages,
       ...otherProps
     } = this.props;
 
+    const uiLanguages = languages.filter((item) => item.value !== 'Original');
+
     return (
       <PageContent title="UI Settings">
         <SettingsToolbarConnector
@@ -220,6 +224,20 @@ class UISettings extends Component {
                     </div>
                   </FormGroup>
                 </FieldSet>
+                <FieldSet legend={translate('Language')}>
+                  <FormGroup>
+                    <FormLabel>{translate('UILanguage')}</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="uiLanguage"
+                      values={uiLanguages}
+                      helpText={translate('UILanguageHelpText')}
+                      helpTextWarning={translate('UILanguageHelpTextWarning')}
+                      onChange={onInputChange}
+                      {...settings.uiLanguage}
+                    />
+                  </FormGroup>
+                </FieldSet>
               </Form>
           }
         </PageContentBody>
@@ -235,6 +253,7 @@ UISettings.propTypes = {
   settings: PropTypes.object.isRequired,
   hasSettings: PropTypes.bool.isRequired,
   onSavePress: PropTypes.func.isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   onInputChange: PropTypes.func.isRequired
 };
 

frontend/src/Settings/UI/UISettingsConnector.js

@@ -9,13 +9,38 @@ import UISettings from './UISettings';
 
 const SECTION = 'ui';
 
+function createLanguagesSelector() {
+  return createSelector(
+    (state) => state.settings.languages,
+    (languages) => {
+      const items = languages.items;
+      const filterItems = ['Any', 'Unknown'];
+
+      if (!items) {
+        return [];
+      }
+
+      const newItems = items.filter((lang) => !filterItems.includes(lang.name)).map((item) => {
+        return {
+          key: item.id,
+          value: item.name
+        };
+      });
+
+      return newItems;
+    }
+  );
+}
+
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
     createSettingsSectionSelector(SECTION),
-    (advancedSettings, sectionSettings) => {
+    createLanguagesSelector(),
+    (advancedSettings, sectionSettings, languages) => {
       return {
         advancedSettings,
+        languages,
         ...sectionSettings
       };
     }