Translate Updated and Connection Lost Modals in frontend

(cherry picked from commit 074aa6f4457bf83173e6ba7209c452a6e0659a35)

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
@@ -64,12 +65,12 @@ function AppUpdatedModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Prowlarr Updated
+        {translate('AppUpdated', { appName: 'Prowlarr' })}
       </ModalHeader>
 
       <ModalBody>
         <div>
-          Version <span className={styles.version}>{version}</span> of Prowlarr has been installed, in order to get the latest changes you'll need to reload Prowlarr.
+          <InlineMarkdown data={translate('AppUpdatedVersion', { appName: 'Prowlarr', version })} blockClassName={styles.version} />
         </div>
 
         {
@@ -77,16 +78,14 @@ function AppUpdatedModalContent(props) {
             <div>
               {
                 !update.changes &&
-                  <div className={styles.maintenance}>
-                    {translate('MaintenanceRelease')}
-                  </div>
+                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
               }
 
               {
                 !!update.changes &&
                   <div>
                     <div className={styles.changes}>
-                      What's new?
+                      {translate('WhatsNew')}
                     </div>
 
                     <UpdateChanges
@@ -113,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

@@ -28,11 +28,11 @@ function ConnectionLostModal(props) {
 
         <ModalBody>
           <div>
-            {translate('ConnectionLostMessage')}
+            {translate('ConnectionLostToBackend', { appName: 'Prowlarr' })}
           </div>
 
           <div className={styles.automatic}>
-            {translate('ConnectionLostAutomaticMessage')}
+            {translate('ConnectionLostReconnect', { appName: 'Prowlarr' })}
           </div>
         </ModalBody>
         <ModalFooter>

frontend/src/Components/Markdown/InlineMarkdown.js

@@ -10,27 +10,55 @@ class InlineMarkdown extends Component {
   render() {
     const {
       className,
-      data
+      data,
+      blockClassName
     } = this.props;
 
-    // For now only replace links
+    // For now only replace links or code blocks (not both)
     const markdownBlocks = [];
     if (data) {
-      const regex = RegExp(/\[(.+?)\]\((.+?)\)/g);
+      const linkRegex = RegExp(/\[(.+?)\]\((.+?)\)/g);
 
       let endIndex = 0;
       let match = null;
-      while ((match = regex.exec(data)) !== null) {
+
+      while ((match = linkRegex.exec(data)) !== null) {
         if (match.index > endIndex) {
           markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
         }
+
         markdownBlocks.push(<Link key={match.index} to={match[2]}>{match[1]}</Link>);
         endIndex = match.index + match[0].length;
       }
 
-      if (endIndex !== data.length) {
+      if (endIndex !== data.length && markdownBlocks.length > 0) {
         markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
       }
+
+      const codeRegex = RegExp(/(?=`)`(?!`)[^`]*(?=`)`(?!`)/g);
+
+      endIndex = 0;
+      match = null;
+      let matchedCode = false;
+
+      while ((match = codeRegex.exec(data)) !== null) {
+        matchedCode = true;
+
+        if (match.index > endIndex) {
+          markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
+        }
+
+        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;
+      }
+
+      if (endIndex !== data.length && markdownBlocks.length > 0 && matchedCode) {
+        markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
+      }
+
+      if (markdownBlocks.length === 0) {
+        markdownBlocks.push(data);
+      }
     }
 
     return <span className={className}>{markdownBlocks}</span>;
@@ -39,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

@@ -31,6 +31,8 @@
   "AppProfileInUse": "App Profile in Use",
   "AppProfileSelectHelpText": "App profiles are used to control RSS, Automatic Search and Interactive Search settings on application sync",
   "AppSettingsSummary": "Applications and settings to configure how Prowlarr interacts with your PVR programs",
+  "AppUpdated": "{appName} Updated",
+  "AppUpdatedVersion": "{appName} has been updated to version `{version}`, in order to get the latest changes you'll need to reload {appName}",
   "Application": "Application",
   "ApplicationLongTermStatusCheckAllClientMessage": "All applications are unavailable due to failures for more than 6 hours",
   "ApplicationLongTermStatusCheckSingleClientMessage": "Applications unavailable due to failures for more than 6 hours: {0}",
@@ -103,8 +105,8 @@
   "ConnectSettings": "Connect Settings",
   "ConnectSettingsSummary": "Notifications and custom scripts",
   "ConnectionLost": "Connection Lost",
-  "ConnectionLostAutomaticMessage": "Prowlarr will try to connect automatically, or you can click reload below.",
-  "ConnectionLostMessage": "Prowlarr has lost its connection to the backend and will need to be reloaded to restore functionality.",
+  "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",
   "CouldNotConnectSignalR": "Could not connect to SignalR, UI won't update",
   "CountApplicationsSelected": "{count} application(s) selected",
@@ -375,6 +377,7 @@
   "RSSIsNotSupportedWithThisIndexer": "RSS is not supported with this indexer",
   "RawSearchSupported": "Raw Search Supported",
   "ReadTheWikiForMoreInformation": "Read the Wiki for more information",
+  "RecentChanges": "Recent Changes",
   "Reddit": "Reddit",
   "Redirect": "Redirect",
   "RedirectHelpText": "Redirect incoming download request for indexer and pass the grab directly instead of proxying the request via Prowlarr",
@@ -552,6 +555,7 @@
   "VipExpiration": "VIP Expiration",
   "Warn": "Warn",
   "Website": "Website",
+  "WhatsNew": "What's New?",
   "Wiki": "Wiki",
   "Year": "Year",
   "Yes": "Yes",