Translate System pages

frontend/src/System/Backup/BackupRow.js

@@ -9,6 +9,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
 import styles from './BackupRow.css';
 
@@ -75,14 +76,14 @@ class BackupRow extends Component {
     } = this.state;
 
     let iconClassName = icons.SCHEDULED;
-    let iconTooltip = 'Scheduled';
+    let iconTooltip = translate('Scheduled');
 
     if (type === 'manual') {
       iconClassName = icons.INTERACTIVE;
-      iconTooltip = 'Manual';
+      iconTooltip = translate('Manual');
     } else if (type === 'update') {
       iconClassName = icons.UPDATE;
-      iconTooltip = 'Before update';
+      iconTooltip = translate('BeforeUpdate');
     }
 
     return (
@@ -115,12 +116,13 @@ class BackupRow extends Component {
 
         <TableRowCell className={styles.actions}>
           <IconButton
+            title={translate('RestoreBackup')}
             name={icons.RESTORE}
             onPress={this.onRestorePress}
           />
 
           <IconButton
-            title="Delete backup"
+            title={translate('DeleteBackup')}
             name={icons.DELETE}
             onPress={this.onDeletePress}
           />
@@ -136,9 +138,11 @@ class BackupRow extends Component {
         <ConfirmModal
           isOpen={isConfirmDeleteModalOpen}
           kind={kinds.DANGER}
-          title="Delete Backup"
-          message={`Are you sure you want to delete the backup '${name}'?`}
-          confirmLabel="Delete"
+          title={translate('DeleteBackup')}
+          message={translate('DeleteBackupMessageText', {
+            name
+          })}
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeletePress}
           onCancel={this.onConfirmDeleteModalClose}
         />

frontend/src/System/Backup/Backups.js

@@ -10,6 +10,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import BackupRow from './BackupRow';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
 
@@ -20,17 +21,23 @@ const columns = [
   },
   {
     name: 'name',
-    label: 'Name',
+    get label() {
+      return translate('Name');
+    },
     isVisible: true
   },
   {
     name: 'size',
-    label: 'Size',
+    get label() {
+      return translate('Size');
+    },
     isVisible: true
   },
   {
     name: 'time',
-    label: 'Time',
+    get label() {
+      return translate('Time');
+    },
     isVisible: true
   },
   {
@@ -81,18 +88,18 @@ class Backups extends Component {
     const noBackups = isPopulated && !items.length;
 
     return (
-      <PageContent title="Backups">
+      <PageContent title={translate('Backups')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Backup Now"
+              label={translate('BackupNow')}
               iconName={icons.BACKUP}
               isSpinning={backupExecuting}
               onPress={onBackupPress}
             />
 
             <PageToolbarButton
-              label="Restore Backup"
+              label={translate('RestoreBackup')}
               iconName={icons.RESTORE}
               onPress={this.onRestorePress}
             />
@@ -108,14 +115,14 @@ class Backups extends Component {
           {
             !isFetching && !!error &&
               <Alert kind={kinds.DANGER}>
-                Unable to load backups
+                {translate('UnableToLoadBackups')}
               </Alert>
           }
 
           {
             noBackups &&
               <Alert kind={kinds.INFO}>
-                No backups are available
+                {translate('NoBackupsAreAvailable')}
               </Alert>
           }
 

frontend/src/System/Backup/RestoreBackupModalContent.js

@@ -9,11 +9,12 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './RestoreBackupModalContent.css';
 
 function getErrorMessage(error) {
   if (!error || !error.responseJSON || !error.responseJSON.message) {
-    return 'Error restoring backup';
+    return translate('ErrorRestoringBackup');
   }
 
   return error.responseJSON.message;
@@ -145,7 +146,9 @@ class RestoreBackupModalContent extends Component {
 
         <ModalBody>
           {
-            !!id && `Would you like to restore the backup '${name}'?`
+            !!id && translate('WouldYouLikeToRestoreBackup', {
+              name
+            })
           }
 
           {
@@ -167,7 +170,9 @@ class RestoreBackupModalContent extends Component {
                 />
               </div>
 
-              <div>Restore</div>
+              <div>
+                {translate('Restore')}
+              </div>
             </div>
 
             <div className={styles.step}>
@@ -178,7 +183,9 @@ class RestoreBackupModalContent extends Component {
                 />
               </div>
 
-              <div>Restart</div>
+              <div>
+                {translate('Restart')}
+              </div>
             </div>
 
             <div className={styles.step}>
@@ -189,18 +196,20 @@ class RestoreBackupModalContent extends Component {
                 />
               </div>
 
-              <div>Reload</div>
+              <div>
+                {translate('Reload')}
+              </div>
             </div>
           </div>
         </ModalBody>
 
         <ModalFooter>
           <div className={styles.additionalInfo}>
-            Note: Sonarr will automatically restart and reload the UI during the restore process.
+            {translate('RestartReloadNote')}
           </div>
 
           <Button onPress={onModalClose}>
-            Cancel
+            {translate('Cancel')}
           </Button>
 
           <SpinnerButton
@@ -209,7 +218,7 @@ class RestoreBackupModalContent extends Component {
             isSpinning={isRestoring}
             onPress={this.onRestorePress}
           >
-            Restore
+            {translate('Restore')}
           </SpinnerButton>
         </ModalFooter>
       </ModalContent>