Add Translations to Settings Pages

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js

@@ -13,6 +13,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import { stringSettingShape } from 'Helpers/Props/Shapes/settingShape';
+import translate from 'Utilities/String/translate';
 import styles from './EditRemotePathMappingModalContent.css';
 
 function EditRemotePathMappingModalContent(props) {
@@ -40,7 +41,7 @@ function EditRemotePathMappingModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {id ? 'Edit Remote Path Mapping' : 'Add Remote Path Mapping'}
+        {id ? translate('EditRemotePathMapping') : translate('AddRemotePathMapping')}
       </ModalHeader>
 
       <ModalBody className={styles.body}>
@@ -51,19 +52,21 @@ function EditRemotePathMappingModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>Unable to add a new remote path mapping, please try again.</div>
+            <div>
+              {translate('AddRemotePathMappingError')}
+            </div>
         }
 
         {
           !isFetching && !error &&
             <Form {...otherProps}>
               <FormGroup>
-                <FormLabel>Host</FormLabel>
+                <FormLabel>{translate('Host')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
                   name="host"
-                  helpText="The same host you specified for the remote Download Client"
+                  helpText={translate('RemotePathMappingHostHelpText')}
                   {...host}
                   values={downloadClientHosts}
                   onChange={onInputChange}
@@ -71,24 +74,24 @@ function EditRemotePathMappingModalContent(props) {
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Remote Path</FormLabel>
+                <FormLabel>{translate('RemotePath')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.TEXT}
                   name="remotePath"
-                  helpText="Root path to the directory that the Download Client accesses"
+                  helpText={translate('RemotePathMappingRemotePathHelpText')}
                   {...remotePath}
                   onChange={onInputChange}
                 />
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Local Path</FormLabel>
+                <FormLabel>{translate('LocalPath')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.PATH}
                   name="localPath"
-                  helpText="Path that Sonarr should use to access the remote path locally"
+                  helpText={translate('RemotePathMappingLocalPathHelpText')}
                   {...localPath}
                   onChange={onInputChange}
                 />
@@ -105,14 +108,14 @@ function EditRemotePathMappingModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteRemotePathMappingPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 
         <Button
           onPress={onModalClose}
         >
-          Cancel
+          {translate('Cancel')}
         </Button>
 
         <SpinnerErrorButton
@@ -120,7 +123,7 @@ function EditRemotePathMappingModalContent(props) {
           error={saveError}
           onPress={onSavePress}
         >
-          Save
+          {translate('Save')}
         </SpinnerErrorButton>
       </ModalFooter>
     </ModalContent>

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.js

@@ -5,6 +5,7 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import EditRemotePathMappingModalConnector from './EditRemotePathMappingModalConnector';
 import styles from './RemotePathMapping.css';
 
@@ -87,9 +88,9 @@ class RemotePathMapping extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteRemotePathMappingModalOpen}
           kind={kinds.DANGER}
-          title="Delete Remote Path Mapping"
-          message="Are you sure you want to delete this remote path mapping?"
-          confirmLabel="Delete"
+          title={translate('DeleteRemotePathMapping')}
+          message={translate('DeleteRemotePathMappingMessageText')}
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteRemotePathMapping}
           onCancel={this.onDeleteRemotePathMappingModalClose}
         />

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js

@@ -5,6 +5,7 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import EditRemotePathMappingModalConnector from './EditRemotePathMappingModalConnector';
 import RemotePathMapping from './RemotePathMapping';
 import styles from './RemotePathMappings.css';
@@ -44,15 +45,21 @@ class RemotePathMappings extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Remote Path Mappings">
+      <FieldSet legend={translate('RemotePathMappings')} >
         <PageSectionContent
-          errorMessage="Unable to load Remote Path Mappings"
+          errorMessage={translate('RemotePathMappingsLoadError')}
           {...otherProps}
         >
           <div className={styles.remotePathMappingsHeader}>
-            <div className={styles.host}>Host</div>
-            <div className={styles.path}>Remote Path</div>
-            <div className={styles.path}>Local Path</div>
+            <div className={styles.host}>
+              {translate('Host')}
+            </div>
+            <div className={styles.path}>
+              {translate('RemotePath')}
+            </div>
+            <div className={styles.path}>
+              {translate('LocalPath')}
+            </div>
           </div>
 
           <div>