Translate System pages

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';
 
@@ -30,25 +31,32 @@ 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"
-                data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
+                title={translate('PackageVersion')}
+                data={(packageAuthor ?
+                  <InlineMarkdown data={translate('PackageVersionInfo', {
+                    packageVersion,
+                    packageAuthor
+                  })}
+                  /> :
+                  packageVersion
+                )}
               />
           }
 
           {
             isNetCore &&
               <DescriptionListItem
-                title=".Net Version"
+                title={translate('DotNetVersion')}
                 data={`Yes (${runtimeVersion})`}
               />
           }
@@ -56,28 +64,28 @@ class About extends Component {
           {
             isDocker &&
               <DescriptionListItem
-                title="Docker"
+                title={translate('Docker')}
                 data={'Yes'}
               />
           }
 
           <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,22 +9,29 @@ 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 = [
   {
     name: 'path',
-    label: 'Location',
+    get label() {
+      return translate('Location');
+    },
     isVisible: true
   },
   {
     name: 'freeSpace',
-    label: 'Free Space',
+    get label() {
+      return translate('FreeSpace');
+    },
     isVisible: true
   },
   {
     name: 'totalSpace',
-    label: 'Total Space',
+    get label() {
+      return translate('TotalSpace');
+    },
     isVisible: true
   },
   {
@@ -45,7 +52,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) {
@@ -23,7 +24,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.SERIES_CONTINUING}
-          title="Series Editor"
+          title={translate('SeriesEditor')}
           to="/serieseditor"
         />
       );
@@ -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}
         />
@@ -93,12 +94,16 @@ const columns = [
   },
   {
     name: 'message',
-    label: 'Message',
+    get label() {
+      return translate('Message');
+    },
     isVisible: true
   },
   {
     name: 'actions',
-    label: 'Actions',
+    get label() {
+      return translate('Actions');
+    },
     isVisible: true
   }
 ];
@@ -121,7 +126,7 @@ class Health extends Component {
       <FieldSet
         legend={
           <div className={styles.legend}>
-            Health
+            {translate('Health')}
 
             {
               isFetching && isPopulated &&
@@ -141,7 +146,7 @@ class Health extends Component {
         {
           !healthIssues &&
             <div className={styles.healthOk}>
-              No issues with your configuration
+              {translate('NoIssuesWithYourConfiguration')}
             </div>
         }
 
@@ -186,7 +191,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,34 +13,46 @@ class MoreInfo extends Component {
 
   render() {
     return (
-      <FieldSet legend="More Info">
+      <FieldSet legend={translate('MoreInfo')}>
         <DescriptionList>
-          <DescriptionListItemTitle>Home page</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('HomePage')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://sonarr.tv/">sonarr.tv</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Wiki</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Wiki')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://wiki.servarr.com/sonarr">wiki.servarr.com/sonarr</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Forums</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Forums')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Twitter</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Twitter')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://twitter.com/sonarrtv">@sonarrtv</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Discord</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Discord')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://discord.sonarr.tv/">discord.sonarr.tv</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>IRC</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('IRC')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="irc://irc.libera.chat/#sonarr">#sonarr on Libera</Link>
           </DescriptionListItemDescription>
@@ -47,17 +60,23 @@ class MoreInfo extends Component {
             <Link to="https://web.libera.chat/?channels=#sonarr">Libera webchat</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Donations</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Donations')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://sonarr.tv/donate">sonarr.tv/donate</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Source</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('Source')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://github.com/Sonarr/Sonarr/">github.com/Sonarr/Sonarr</Link>
           </DescriptionListItemDescription>
 
-          <DescriptionListItemTitle>Feature Requests</DescriptionListItemTitle>
+          <DescriptionListItemTitle>
+            {translate('FeatureRequests')}
+          </DescriptionListItemTitle>
           <DescriptionListItemDescription>
             <Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
           </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 />