Localization framework

frontend/src/System/Status/About/About.js

@@ -5,6 +5,7 @@ import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'
 import FieldSet from 'Components/FieldSet';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
 import StartTime from './StartTime';
 import styles from './About.css';
 
@@ -32,17 +33,17 @@ class About extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="About">
+      <FieldSet legend={translate('About')}>
         <DescriptionList className={styles.descriptionList}>
           <DescriptionListItem
-            title="Version"
+            title={translate('Version')}
             data={version}
           />
 
           {
             packageVersion &&
               <DescriptionListItem
-                title="Package Version"
+                title={translate('PackageVersion')}
                 data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
               />
           }
@@ -50,7 +51,7 @@ class About extends Component {
           {
             isMono &&
               <DescriptionListItem
-                title="Mono Version"
+                title={translate('MonoVersion')}
                 data={runtimeVersion}
               />
           }
@@ -58,7 +59,7 @@ class About extends Component {
           {
             isNetCore &&
               <DescriptionListItem
-                title=".NET Core"
+                title={translate('NETCore')}
                 data={`Yes (${runtimeVersion})`}
               />
           }
@@ -66,33 +67,33 @@ class About extends Component {
           {
             isDocker &&
               <DescriptionListItem
-                title="Docker"
+                title={translate('Docker')}
                 data={'Yes'}
               />
           }
 
           <DescriptionListItem
-            title="DB Migration"
+            title={translate('DBMigration')}
             data={migrationVersion}
           />
 
           <DescriptionListItem
-            title="AppData directory"
+            title={translate('AppDataDirectory')}
             data={appData}
           />
 
           <DescriptionListItem
-            title="Startup directory"
+            title={translate('StartupDirectory')}
             data={startupPath}
           />
 
           <DescriptionListItem
-            title="Mode"
+            title={translate('Mode')}
             data={titleCase(mode)}
           />
 
           <DescriptionListItem
-            title="Uptime"
+            title={translate('Uptime')}
             data={
               <StartTime
                 startTime={startTime}

frontend/src/System/Status/DiskSpace/DiskSpace.js

@@ -9,6 +9,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import { kinds, sizes } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './DiskSpace.css';
 
 const columns = [
@@ -45,7 +46,7 @@ class DiskSpace extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Disk Space">
+      <FieldSet legend={translate('DiskSpace')}>
         {
           isFetching &&
             <LoadingIndicator />

frontend/src/System/Status/Health/Health.js

@@ -11,6 +11,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
 import styles from './Health.css';
 
 function getInternalLink(source) {
@@ -22,7 +23,7 @@ function getInternalLink(source) {
       return (
         <IconButton
           name={icons.SETTINGS}
-          title="Settings"
+          title={translate('Settings')}
           to="/settings/indexers"
         />
       );
@@ -33,7 +34,7 @@ function getInternalLink(source) {
       return (
         <IconButton
           name={icons.SETTINGS}
-          title="Settings"
+          title={translate('Settings')}
           to="/settings/downloadclients"
         />
       );
@@ -41,7 +42,7 @@ function getInternalLink(source) {
       return (
         <IconButton
           name={icons.AUTHOR_CONTINUING}
-          title="Author Editor"
+          title={translate('AuthorEditor')}
           to="/authoreditor"
         />
       );
@@ -49,7 +50,7 @@ function getInternalLink(source) {
       return (
         <IconButton
           name={icons.UPDATE}
-          title="Updates"
+          title={translate('Updates')}
           to="/system/updates"
         />
       );
@@ -64,7 +65,7 @@ function getTestLink(source, props) {
       return (
         <SpinnerIconButton
           name={icons.TEST}
-          title="Test All"
+          title={translate('TestAll')}
           isSpinning={props.isTestingAllIndexers}
           onPress={props.dispatchTestAllIndexers}
         />
@@ -74,7 +75,7 @@ function getTestLink(source, props) {
       return (
         <SpinnerIconButton
           name={icons.TEST}
-          title="Test All"
+          title={translate('TestAll')}
           isSpinning={props.isTestingAllDownloadClients}
           onPress={props.dispatchTestAllDownloadClients}
         />
@@ -186,7 +187,7 @@ class Health extends Component {
                           <IconButton
                             name={icons.WIKI}
                             to={item.wikiUrl}
-                            title="Read the Wiki for more information"
+                            title={translate('ReadTheWikiForMoreInformation')}
                           />
 
                           {

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -4,6 +4,7 @@ import DescriptionListItemDescription from 'Components/DescriptionList/Descripti
 import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
 import FieldSet from 'Components/FieldSet';
 import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
 
 class MoreInfo extends Component {
 
@@ -12,7 +13,7 @@ class MoreInfo extends Component {
 
   render() {
     return (
-      <FieldSet legend="More Info">
+      <FieldSet legend={translate('MoreInfo')}>
         <DescriptionList>
           <DescriptionListItemTitle>Home page</DescriptionListItemTitle>
           <DescriptionListItemDescription>

frontend/src/System/Status/Status.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import translate from 'Utilities/String/translate';
 import AboutConnector from './About/AboutConnector';
 import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
 import HealthConnector from './Health/HealthConnector';
@@ -13,7 +14,7 @@ class Status extends Component {
 
   render() {
     return (
-      <PageContent title="Status">
+      <PageContent title={translate('Status')}>
         <PageContentBody>
           <HealthConnector />
           <DiskSpaceConnector />