Add Translations to Settings Pages

(cherry picked from commit f2c31e92ceec7c6a8daffa78f30f15ab8684bef9)

frontend/src/Settings/CustomFormats/CustomFormatSettingsPage.tsx

@@ -6,11 +6,12 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import ParseToolbarButton from 'Parse/ParseToolbarButton';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
 import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
 
 function CustomFormatSettingsPage() {
   return (
-    <PageContent title="Custom Format Settings">
+    <PageContent title={translate('CustomFormatsSettings')}>
       <SettingsToolbarConnector
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js

@@ -61,7 +61,7 @@ class CustomFormats extends Component {
     return (
       <FieldSet legend={translate('CustomFormats')}>
         <PageSectionContent
-          errorMessage={translate('UnableToLoadCustomFormats')}
+          errorMessage={translate('CustomFormatsLoadError')}
           {...otherProps}c={true}
         >
           <div className={styles.customFormats}>

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Card from 'Components/Card';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
@@ -112,9 +113,9 @@ class EditCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
-                  {translate('UnableToAddANewCustomFormatPleaseTryAgain')}
-                </div>
+                <Alert kind={kinds.DANGER}>
+                  {translate('AddCustomFormatError')}
+                </Alert>
             }
 
             {

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js

@@ -43,7 +43,7 @@ class ExportCustomFormatModalContent extends Component {
             {
               !isFetching && !!error &&
                 <Alert kind={kinds.DANGER}>
-                  {translate('UnableToLoadCustomFormats')}
+                  {translate('CustomFormatsLoadError')}
                 </Alert>
             }
 

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js

@@ -97,7 +97,7 @@ class ImportCustomFormatModalContent extends Component {
             {
               !isFetching && !!error &&
                 <Alert kind={kinds.DANGER}>
-                  {translate('UnableToLoadCustomFormats')}
+                  {translate('CustomFormatsLoadError')}
                 </Alert>
             }
 

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContentConnector.js

@@ -89,7 +89,9 @@ class ImportCustomFormatModalContentConnector extends Component {
     const selectedImplementation = _.find(this.props.specificationSchema, { implementation: spec.implementation });
 
     if (!selectedImplementation) {
-      throw new Error(translate('CustomFormatUnknownCondition', [spec.implementation]));
+      throw new Error(translate('CustomFormatUnknownCondition', {
+        implementation: spec.implementation
+      }));
     }
 
     this.props.selectCustomFormatSpecificationSchema({ implementation: spec.implementation });
@@ -109,7 +111,10 @@ class ImportCustomFormatModalContentConnector extends Component {
     for (const [key, value] of Object.entries(fields)) {
       const field = _.find(schema.fields, { name: key });
       if (!field) {
-        throw new Error(translate('CustomFormatUnknownConditionOption', [key, schema.implementationName]));
+        throw new Error(translate('CustomFormatUnknownConditionOption', {
+          key,
+          implementation: schema.implementationName
+        }));
       }
 
       this.props.setCustomFormatSpecificationFieldValue({ name: key, value });

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js

@@ -43,7 +43,7 @@ class AddSpecificationModalContent extends Component {
           {
             !isSchemaFetching && !!schemaError &&
               <div>
-                {translate('UnableToAddANewConditionPleaseTryAgain')}
+                {translate('AddConditionError')}
               </div>
           }
 
@@ -53,10 +53,10 @@ class AddSpecificationModalContent extends Component {
 
                 <Alert kind={kinds.INFO}>
                   <div>
-                    {translate('RadarrSupportsCustomConditionsAgainstTheReleasePropertiesBelow')}
+                    {translate('SupportedCustomConditions')}
                   </div>
                   <div>
-                    {translate('VisitGithubCustomFormatsAphrodite')}
+                    {translate('VisitTheWikiForMoreDetails')}
                     <Link to="https://wiki.servarr.com/radarr/settings#custom-formats-2">{translate('Wiki')}</Link>
                   </div>
                 </Alert>

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.js

@@ -7,8 +7,8 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
 import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
 import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
@@ -52,12 +52,13 @@ function EditSpecificationModalContent(props) {
             fields && fields.some((x) => x.label === translate('CustomFormatsSpecificationRegularExpression')) &&
               <Alert kind={kinds.INFO}>
                 <div>
-                  <div dangerouslySetInnerHTML={{ __html: translate('ThisConditionMatchesUsingRegularExpressions', ['<code>\\^$.|?*+()[{</code>', '<code>\\</code>']) }} />
-                  {translate('MoreDetails')} <Link to="https://www.regular-expressions.info/tutorial.html">{translate('LinkHere')}</Link>
+                  <InlineMarkdown data={translate('ConditionUsingRegularExpressions')} />
                 </div>
                 <div>
-                  {translate('RegularExpressionsCanBeTested')}
-                  <Link to="http://regexstorm.net/tester">{translate('LinkHere')}</Link>
+                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink')} />
+                </div>
+                <div>
+                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested')} />
                 </div>
               </Alert>
           }
@@ -99,7 +100,7 @@ function EditSpecificationModalContent(props) {
               type={inputTypes.CHECK}
               name="negate"
               {...negate}
-              helpText={translate('NegateHelpText', [implementationName])}
+              helpText={translate('NegateHelpText', { implementationName })}
               onChange={onInputChange}
             />
           </FormGroup>
@@ -113,7 +114,7 @@ function EditSpecificationModalContent(props) {
               type={inputTypes.CHECK}
               name="required"
               {...required}
-              helpText={translate('RequiredHelpText', [implementationName, implementationName])}
+              helpText={translate('RequiredHelpText', { implementationName })}
               onChange={onInputChange}
             />
           </FormGroup>