Translate Updated and Connection Lost Modals in frontend

frontend/src/App/AppUpdatedModalContent.css

@@ -1,6 +1,7 @@
 .version {
   margin: 0 3px;
   font-weight: bold;
+  font-family: var(--defaultFontFamily);
 }
 
 .maintenance {

frontend/src/App/AppUpdatedModalContent.js

@@ -8,6 +8,8 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import UpdateChanges from 'System/Updates/UpdateChanges';
+import translate from 'Utilities/String/translate';
+import InlineMarkdown from '../Components/Markdown/InlineMarkdown';
 import styles from './AppUpdatedModalContent.css';
 
 function mergeUpdates(items, version, prevVersion) {
@@ -63,12 +65,12 @@ function AppUpdatedModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Sonarr Updated
+        {translate('AppUpdated', { appName: 'Sonarr' })}
       </ModalHeader>
 
       <ModalBody>
         <div>
-          Sonarr has been updated to version <span className={styles.version}>{version}</span>, in order to get the latest changes you'll need to reload Sonarr.
+          <InlineMarkdown data={translate('AppUpdatedVersion', { appName: 'Sonarr', version })} blockClassName={styles.version} />
         </div>
 
         {
@@ -76,23 +78,23 @@ function AppUpdatedModalContent(props) {
             <div>
               {
                 !update.changes &&
-                  <div className={styles.maintenance}>Maintenance Release: See GitHub commit history for details.</div>
+                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
               }
 
               {
                 !!update.changes &&
                   <div>
                     <div className={styles.changes}>
-                      What's new?
+                      {translate('WhatsNew')}
                     </div>
 
                     <UpdateChanges
-                      title="New"
+                      title={translate('New')}
                       changes={update.changes.new}
                     />
 
                     <UpdateChanges
-                      title="Fixed"
+                      title={translate('Fixed')}
                       changes={update.changes.fixed}
                     />
                   </div>
@@ -110,14 +112,14 @@ function AppUpdatedModalContent(props) {
         <Button
           onPress={onSeeChangesPress}
         >
-          Recent Changes
+          {translate('RecentChanges')}
         </Button>
 
         <Button
           kind={kinds.PRIMARY}
           onPress={onModalClose}
         >
-          Reload
+          {translate('Reload')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/App/ConnectionLostModal.js

@@ -7,6 +7,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
 function ConnectionLostModal(props) {
@@ -22,16 +23,16 @@ function ConnectionLostModal(props) {
     >
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Connection Lost
+          {translate('ConnectionLost')}
         </ModalHeader>
 
         <ModalBody>
           <div>
-            Sonarr has lost its connection to the backend and will need to be reloaded to restore functionality.
+            {translate('ConnectionLostToBackend', { appName: 'Sonarr' })}
           </div>
 
           <div className={styles.automatic}>
-            Sonarr will try to connect automatically, or you can click reload below.
+            {translate('ConnectionLostReconnect', { appName: 'Sonarr' })}
           </div>
         </ModalBody>
         <ModalFooter>
@@ -39,7 +40,7 @@ function ConnectionLostModal(props) {
             kind={kinds.PRIMARY}
             onPress={onModalClose}
           >
-            Reload
+            {translate('Reload')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Components/Markdown/InlineMarkdown.js

@@ -10,7 +10,8 @@ class InlineMarkdown extends Component {
   render() {
     const {
       className,
-      data
+      data,
+      blockClassName
     } = this.props;
 
     // For now only replace links or code blocks (not both)
@@ -47,7 +48,7 @@ class InlineMarkdown extends Component {
           markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
         }
 
-        markdownBlocks.push(<code key={`code-${match.index}`}>{match[0].substring(1, match[0].length - 1)}</code>);
+        markdownBlocks.push(<code key={`code-${match.index}`} className={blockClassName ?? null}>{match[0].substring(1, match[0].length - 1)}</code>);
         endIndex = match.index + match[0].length;
       }
 
@@ -66,7 +67,8 @@ class InlineMarkdown extends Component {
 
 InlineMarkdown.propTypes = {
   className: PropTypes.string,
-  data: PropTypes.string
+  data: PropTypes.string,
+  blockClassName: PropTypes.string
 };
 
 export default InlineMarkdown;

src/NzbDrone.Core/Localization/Core/en.json

@@ -66,6 +66,8 @@
   "ApiKeyValidationHealthCheckMessage": "Please update your API key to be at least {0} characters long. You can do this via settings or the config file",
   "AppDataDirectory": "AppData directory",
   "AppDataLocationHealthCheckMessage": "Updating will not be possible to prevent deleting AppData on Update",
+  "AppUpdated": "{appName} Updated",
+  "AppUpdatedVersion": "{appName} has been updated to version `{version}`, in order to get the latest changes you'll need to reload {appName} ",
   "ApplicationURL": "Application URL",
   "ApplicationUrlHelpText": "This application's external URL including http(s)://, port and URL base",
   "Apply": "Apply",
@@ -175,6 +177,9 @@
   "Connect": "Connect",
   "ConnectSettings": "Connect Settings",
   "ConnectSettingsSummary": "Notifications, connections to media servers/players, and custom scripts",
+  "ConnectionLost": "Connection Lost",
+  "ConnectionLostReconnect": "{appName} will try to connect automatically, or you can click reload below.",
+  "ConnectionLostToBackend": "{appName} has lost its connection to the backend and will need to be reloaded to restore functionality.",
   "Connections": "Connections",
   "ContinuingOnly": "Continuing Only",
   "CopyToClipboard": "Copy to Clipboard",
@@ -760,6 +765,7 @@
   "ReadTheWikiForMoreInformation": "Read the Wiki for more information",
   "Real": "Real",
   "Reason": "Reason",
+  "RecentChanges": "Recent Changes",
   "RecycleBinUnableToWriteHealthCheckMessage": "Unable to write to configured recycling bin folder: {0}. Ensure this path exists and is writable by the user running Sonarr",
   "RecyclingBin": "Recycling Bin",
   "RecyclingBinCleanup": "Recycling Bin Cleanup",
@@ -1100,6 +1106,7 @@
   "Week": "Week",
   "WeekColumnHeader": "Week Column Header",
   "WeekColumnHeaderHelpText": "Shown above each column when week is the active view",
+  "WhatsNew": "What's New?",
   "WhyCantIFindMyShow": "Why can't I find my show?",
   "Wiki": "Wiki",
   "WouldYouLikeToRestoreBackup": "Would you like to restore the backup '{name}'?",