Bump to 2.13.3

ignore-downstream

Co-authored-by: mrchonks <chonkstv@gmail.com>
Translate-URL: https://translate.servarr.com/projects/servarr/lidarr/fr/
Translation: Servarr/Lidarr

.devcontainer/devcontainer.json

@@ -6,7 +6,7 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,
-      "version": "16",
+      "version": "20",
       "nvmVersion": "latest"
     }
   },

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -60,6 +60,7 @@ body:
       - Master
       - Develop
       - Nightly
+      - Plugins (experimental)
       - Other (This issue will be closed)
   validations:
     required: true

.gitignore

@@ -158,34 +158,12 @@ Thumbs.db
 /tools/Addins/*
 packages.config.md5sum
 
-
-# Common IntelliJ Platform excludes
-
-# User specific
-**/.idea/**/workspace.xml
-**/.idea/**/tasks.xml
-**/.idea/shelf/*
-**/.idea/dictionaries
-**/.idea/.idea.Radarr.Posix
-**/.idea/.idea.Radarr.Windows
-
-# Sensitive or high-churn files
-**/.idea/**/dataSources/
-**/.idea/**/dataSources.ids
-**/.idea/**/dataSources.xml
-**/.idea/**/dataSources.local.xml
-**/.idea/**/sqlDataSources.xml
-**/.idea/**/dynamic.xml
-
-# Rider
-# Rider auto-generates .iml files, and contentModel.xml
-**/.idea/**/*.iml
-**/.idea/**/contentModel.xml
-**/.idea/**/modules.xml
-
 # ignore node_modules symlink
 node_modules
 node_modules.nosync
 
 # API doc generation
 .config/
+
+# Ignore Jetbrains IntelliJ Workspace Directories
+.idea/

README.md

@@ -9,6 +9,9 @@
 
 Lidarr is a music collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new tracks from your favorite artists and will grab, sort and rename them. It can also be configured to automatically upgrade the quality of files already downloaded when a better quality format becomes available.
 
+> [!WARNING]
+> NOTICE - The Lidarr Metadata Server is currently down impacting adding artists, etc. Please follow [GHI 5498](https://github.com/Lidarr/Lidarr/issues/5498) or see Discord for detaila.
+
 ## Major Features Include:
 
 * Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.

azure-pipelines.yml

@@ -9,17 +9,17 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '2.6.4'
+  majorVersion: '2.13.3'
   minorVersion: $[counter('minorVersion', 1076)]
   lidarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(lidarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.424'
+  dotnetVersion: '6.0.427'
   nodeVersion: '20.X'
   innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-20.04'
+  linuxImage: 'ubuntu-22.04'
   macImage: 'macOS-13'
 
 trigger:
@@ -1120,19 +1120,19 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@3
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'lidarr'
-          scannerMode: 'CLI'
+          scannerMode: 'cli'
           configMode: 'manual'
           cliProjectKey: 'lidarr_Lidarr.UI'
           cliProjectName: 'LidarrUI'
           cliProjectVersion: '$(lidarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@2
+      - task: SonarCloudAnalyze@3
 
     - job: Api_Docs
       displayName: API Docs
@@ -1208,12 +1208,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@2
+      - task: SonarCloudPrepare@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'lidarr'
-          scannerMode: 'MSBuild'
+          scannerMode: 'dotnet'
           projectKey: 'lidarr_Lidarr'
           projectName: 'Lidarr'
           projectVersion: '$(lidarrVersion)'
@@ -1226,10 +1226,10 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@2
+      - task: SonarCloudAnalyze@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@5
+      - task: reportgenerator@5.3.11
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'

docs.sh

@@ -1,13 +1,18 @@
+#!/bin/bash
+set -e
+
+FRAMEWORK="net6.0"
 PLATFORM=$1
+ARCHITECTURE="${2:-x64}"
 
 if [ "$PLATFORM" = "Windows" ]; then
-  RUNTIME="win-x64"
+  RUNTIME="win-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-x64"
+  RUNTIME="linux-$ARCHITECTURE"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-x64"
+  RUNTIME="osx-$ARCHITECTURE"
 else
-  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
+  echo "Platform must be provided as first argument: Windows, Linux or Mac"
   exit 1
 fi
 
@@ -35,7 +40,7 @@ dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p
 dotnet new tool-manifest
 dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Lidarr.Api.V1/openapi.json "$outputFolder/net6.0/$RUNTIME/$application" v1 &
+dotnet tool run swagger tofile --output ./src/Lidarr.Api.V1/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v1 &
 
 sleep 45
 

frontend/build/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false
@@ -134,6 +135,12 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
+              },
+
+              // manifest.json and browserconfig.xml
+              {
+                source: 'frontend/src/Content/*.(json|xml)',
+                destination: path.join(distFolder, 'Content')
               }
             ]
           }
@@ -181,7 +188,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: 3
+                      corejs: '3.41'
                     }
                   ]
                 ]

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -172,7 +172,8 @@ function HistoryDetails(props) {
 
   if (eventType === 'downloadFailed') {
     const {
-      message
+      message,
+      indexer
     } = data;
 
     return (
@@ -192,6 +193,14 @@ function HistoryDetails(props) {
             null
         }
 
+        {
+          indexer ? (
+            <DescriptionListItem
+              title={translate('Indexer')}
+              data={indexer}
+            />
+          ) : null}
+
         {
           message ?
             <DescriptionListItem

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -57,30 +57,40 @@ function QueueStatusCell(props) {
 
   if (status === 'paused') {
     iconName = icons.PAUSED;
-    title = 'Paused';
+    title = translate('Paused');
   }
 
   if (status === 'queued') {
     iconName = icons.QUEUED;
-    title = 'Queued';
+    title = translate('Queued');
   }
 
   if (status === 'completed') {
     iconName = icons.DOWNLOADED;
-    title = 'Downloaded';
+    title = translate('Downloaded');
+
+    if (trackedDownloadState === 'importBlocked') {
+      title += ` - ${translate('UnableToImportAutomatically')}`;
+      iconKind = kinds.WARNING;
+    }
+
+    if (trackedDownloadState === 'importFailed') {
+      title += ` - ${translate('ImportFailed', { sourceTitle })}`;
+      iconKind = kinds.WARNING;
+    }
 
     if (trackedDownloadState === 'importPending') {
-      title += ' - Waiting to Import';
+      title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
-      title += ' - Importing';
+      title += ` - ${translate('Importing')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
-      title += ' - Waiting to Process';
+      title += ` - ${translate('WaitingToProcess')}`;
       iconKind = kinds.DANGER;
     }
   }
@@ -91,36 +101,38 @@ function QueueStatusCell(props) {
 
   if (status === 'delay') {
     iconName = icons.PENDING;
-    title = 'Pending';
+    title = translate('Pending');
   }
 
   if (status === 'downloadClientUnavailable') {
     iconName = icons.PENDING;
     iconKind = kinds.WARNING;
-    title = 'Pending - Download client is unavailable';
+    title = translate('PendingDownloadClientUnavailable');
   }
 
   if (status === 'failed') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.DANGER;
-    title = 'Download failed';
+    title = translate('DownloadFailed');
   }
 
   if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
-    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+    const warningMessage =
+      errorMessage || translate('CheckDownloadClientForDetails');
+    title = translate('DownloadWarning', { warningMessage });
   }
 
   if (hasError) {
     if (status === 'completed') {
       iconName = icons.DOWNLOAD;
       iconKind = kinds.DANGER;
-      title = `Import failed: ${sourceTitle}`;
+      title = translate('ImportFailed', { sourceTitle });
     } else {
       iconName = icons.DOWNLOADING;
       iconKind = kinds.DANGER;
-      title = 'Download failed';
+      title = translate('DownloadFailed');
     }
   }
 

frontend/src/AddArtist/ArtistMonitorNewItemsOptionsPopoverContent.js

@@ -8,17 +8,17 @@ function ArtistMonitorNewItemsOptionsPopoverContent() {
     <DescriptionList>
       <DescriptionListItem
         title={translate('AllAlbums')}
-        data="Monitor all new albums"
+        data={translate('MonitorAllAlbums')}
       />
 
       <DescriptionListItem
         title={translate('NewAlbums')}
-        data="Monitor new albums released after the newest existing album"
+        data={translate('MonitorNewAlbumsData')}
       />
 
       <DescriptionListItem
         title={translate('None')}
-        data="Don't monitor any new albums"
+        data={translate('MonitorNoAlbumsData')}
       />
     </DescriptionList>
   );

frontend/src/Album/Details/AlbumDetails.js

@@ -205,6 +205,7 @@ class AlbumDetails extends Component {
       isFetching,
       isPopulated,
       albumsError,
+      tracksError,
       trackFilesError,
       hasTrackFiles,
       shortDateFormat,
@@ -552,8 +553,9 @@ class AlbumDetails extends Component {
 
           <div className={styles.contentContainer}>
             {
-              !isPopulated && !albumsError && !trackFilesError &&
-                <LoadingIndicator />
+              !isPopulated && !albumsError && !tracksError && !trackFilesError ?
+                <LoadingIndicator /> :
+                null
             }
 
             {
@@ -564,6 +566,14 @@ class AlbumDetails extends Component {
                 null
             }
 
+            {
+              !isFetching && tracksError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('TracksLoadError')}
+                </Alert> :
+                null
+            }
+
             {
               !isFetching && trackFilesError ?
                 <Alert kind={kinds.DANGER}>
@@ -592,6 +602,14 @@ class AlbumDetails extends Component {
                 </div>
             }
 
+            {
+              isPopulated && !media.length ?
+                <Alert kind={kinds.WARNING}>
+                  {translate('NoMediumInformation')}
+                </Alert> :
+                null
+            }
+
           </div>
 
           <OrganizePreviewModalConnector
@@ -686,6 +704,7 @@ AlbumDetails.propTypes = {
 
 AlbumDetails.defaultProps = {
   secondaryTypes: [],
+  statistics: {},
   isSaving: false
 };
 

frontend/src/App/AppRoutes.js

@@ -29,7 +29,7 @@ import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
 import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import Updates from 'System/Updates/Updates';
 import UnmappedFilesTableConnector from 'UnmappedFiles/UnmappedFilesTableConnector';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
@@ -248,7 +248,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -44,6 +44,7 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  version: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/App/State/SettingsAppState.ts

@@ -13,13 +13,16 @@ import MetadataProfile from 'typings/MetadataProfile';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import RootFolder from 'typings/RootFolder';
-import { UiSettings } from 'typings/UiSettings';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export type GeneralAppState = AppSectionItemState<General>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -59,6 +62,7 @@ interface SettingsAppState {
   advancedSettings: boolean;
   customFormats: CustomFormatAppState;
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;

frontend/src/App/State/SystemAppState.ts

@@ -1,9 +1,12 @@
 import SystemStatus from 'typings/SystemStatus';
-import { AppSectionItemState } from './AppSectionState';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
 
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
+  updates: UpdateAppState;
   status: SystemStatusAppState;
 }
 

frontend/src/Artist/Edit/EditArtistModalContent.js

@@ -15,7 +15,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import { icons, inputTypes, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './EditArtistModalContent.css';
 
@@ -93,7 +93,7 @@ class EditArtistModalContent extends Component {
 
         <ModalBody>
           <Form {...otherProps}>
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Monitored')}
               </FormLabel>
@@ -107,9 +107,10 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('MonitorNewItems')}
+
                 <Popover
                   anchor={
                     <Icon
@@ -132,7 +133,7 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('QualityProfile')}
               </FormLabel>
@@ -146,10 +147,10 @@ class EditArtistModalContent extends Component {
             </FormGroup>
 
             {
-              showMetadataProfile &&
-                <FormGroup>
+              showMetadataProfile ?
+                <FormGroup size={sizes.MEDIUM}>
                   <FormLabel>
-                    Metadata Profile
+                    {translate('MetadataProfile')}
 
                     <Popover
                       anchor={
@@ -173,10 +174,11 @@ class EditArtistModalContent extends Component {
                     {...metadataProfileId}
                     onChange={onInputChange}
                   />
-                </FormGroup>
+                </FormGroup> :
+                null
             }
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Path')}
               </FormLabel>
@@ -189,7 +191,7 @@ class EditArtistModalContent extends Component {
               />
             </FormGroup>
 
-            <FormGroup>
+            <FormGroup size={sizes.MEDIUM}>
               <FormLabel>
                 {translate('Tags')}
               </FormLabel>
@@ -209,7 +211,7 @@ class EditArtistModalContent extends Component {
             kind={kinds.DANGER}
             onPress={onDeleteArtistPress}
           >
-            Delete
+            {translate('Delete')}
           </Button>
 
           <Button

frontend/src/Artist/Index/Menus/ArtistIndexSortMenu.tsx

@@ -79,7 +79,7 @@ function ArtistIndexSortMenu(props: SeriesIndexSortMenuProps) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('Last Album')}
+          {translate('LastAlbum')}
         </SortMenuItem>
 
         <SortMenuItem

frontend/src/Artist/Index/Overview/ArtistIndexOverviewInfo.tsx

@@ -6,7 +6,7 @@ import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import UiSettings from 'typings/Settings/UiSettings';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';

frontend/src/Calendar/iCal/CalendarLinkModalContent.js

@@ -164,7 +164,7 @@ class CalendarLinkModalContent extends Component {
                 type={inputTypes.TAG}
                 name="tags"
                 value={tags}
-                helpText={translate('TagsHelpText')}
+                helpText={translate('ICalTagsArtistHelpText')}
                 onChange={this.onInputChange}
               />
             </FormGroup>

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import PathInput from 'Components/Form/PathInput';
 import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
 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';
@@ -117,7 +117,7 @@ class FileBrowserModalContent extends Component {
                 className={styles.mappedDrivesWarning}
                 kind={kinds.WARNING}
               >
-                Mapped network drives are not available when running as a Windows Service, see the <Link className={styles.faqLink} to="https://wiki.servarr.com/lidarr/faq">FAQ</Link> for more information.
+                <InlineMarkdown data={translate('MappedNetworkDrivesWindowsService', { url: 'https://wiki.servarr.com/lidarr/faq#why-cant-lidarr-see-my-files-on-a-remote-server' })} />
               </Alert>
           }
 

frontend/src/Components/Filter/Builder/HistoryEventTypeFilterBuilderRowValue.tsx

@@ -25,7 +25,7 @@ const EVENT_TYPE_OPTIONS = [
   {
     id: 7,
     get name() {
-      return translate('ImportFailed');
+      return translate('ImportCompleteFailed');
     },
   },
   {

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -20,6 +20,8 @@ import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
 import TextInput from './TextInput';
 import styles from './EnhancedSelectInput.css';
 
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
 function isArrowKey(keyCode) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -137,18 +139,9 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onComputeMaxHeight = (data) => {
-    const {
-      top,
-      bottom
-    } = data.offsets.reference;
-
     const windowHeight = window.innerHeight;
 
-    if ((/^botton/).test(data.placement)) {
-      data.styles.maxHeight = windowHeight - bottom;
-    } else {
-      data.styles.maxHeight = top;
-    }
+    data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
 
     return data;
   };
@@ -457,6 +450,10 @@ class EnhancedSelectInput extends Component {
                   order: 851,
                   enabled: true,
                   fn: this.onComputeMaxHeight
+                },
+                preventOverflow: {
+                  enabled: true,
+                  boundariesElement: 'viewport'
                 }
               }}
             >

frontend/src/Components/Form/FormInputGroup.js

@@ -49,12 +49,12 @@ function getComponent(type) {
     case inputTypes.DEVICE:
       return DeviceInputConnector;
 
-    case inputTypes.PLAYLIST:
-      return PlaylistInputConnector;
-
     case inputTypes.KEY_VALUE_LIST:
       return KeyValueListInput;
 
+    case inputTypes.PLAYLIST:
+      return PlaylistInputConnector;
+
     case inputTypes.MONITOR_ALBUMS_SELECT:
       return MonitorAlbumsSelectInput;
 

frontend/src/Components/Form/KeyValueListInput.js

@@ -1,156 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import KeyValueListInputItem from './KeyValueListInputItem';
-import styles from './KeyValueListInput.css';
-
-class KeyValueListInput extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isFocused: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onItemChange = (index, itemValue) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = [...value];
-
-    if (index == null) {
-      newValue.push(itemValue);
-    } else {
-      newValue.splice(index, 1, itemValue);
-    }
-
-    onChange({
-      name,
-      value: newValue
-    });
-  };
-
-  onRemoveItem = (index) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = [...value];
-    newValue.splice(index, 1);
-
-    onChange({
-      name,
-      value: newValue
-    });
-  };
-
-  onFocus = () => {
-    this.setState({
-      isFocused: true
-    });
-  };
-
-  onBlur = () => {
-    this.setState({
-      isFocused: false
-    });
-
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const newValue = value.reduce((acc, v) => {
-      if (v.key || v.value) {
-        acc.push(v);
-      }
-
-      return acc;
-    }, []);
-
-    if (newValue.length !== value.length) {
-      onChange({
-        name,
-        value: newValue
-      });
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      value,
-      keyPlaceholder,
-      valuePlaceholder,
-      hasError,
-      hasWarning
-    } = this.props;
-
-    const { isFocused } = this.state;
-
-    return (
-      <div className={classNames(
-        className,
-        isFocused && styles.isFocused,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning
-      )}
-      >
-        {
-          [...value, { key: '', value: '' }].map((v, index) => {
-            return (
-              <KeyValueListInputItem
-                key={index}
-                index={index}
-                keyValue={v.key}
-                value={v.value}
-                keyPlaceholder={keyPlaceholder}
-                valuePlaceholder={valuePlaceholder}
-                isNew={index === value.length}
-                onChange={this.onItemChange}
-                onRemove={this.onRemoveItem}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-              />
-            );
-          })
-        }
-      </div>
-    );
-  }
-}
-
-KeyValueListInput.propTypes = {
-  className: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  keyPlaceholder: PropTypes.string,
-  valuePlaceholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired
-};
-
-KeyValueListInput.defaultProps = {
-  className: styles.inputContainer,
-  value: []
-};
-
-export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInput.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { InputOnChange } from 'typings/inputs';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+interface KeyValue {
+  key: string;
+  value: string;
+}
+
+export interface KeyValueListInputProps {
+  className?: string;
+  name: string;
+  value: KeyValue[];
+  hasError?: boolean;
+  hasWarning?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  onChange: InputOnChange<KeyValue[]>;
+}
+
+function KeyValueListInput({
+  className = styles.inputContainer,
+  name,
+  value = [],
+  hasError = false,
+  hasWarning = false,
+  keyPlaceholder,
+  valuePlaceholder,
+  onChange,
+}: KeyValueListInputProps): JSX.Element {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleItemChange = useCallback(
+    (index: number | null, itemValue: KeyValue) => {
+      const newValue = [...value];
+
+      if (index === null) {
+        newValue.push(itemValue);
+      } else {
+        newValue.splice(index, 1, itemValue);
+      }
+
+      onChange({ name, value: newValue });
+    },
+    [value, name, onChange]
+  );
+
+  const handleRemoveItem = useCallback(
+    (index: number) => {
+      const newValue = [...value];
+      newValue.splice(index, 1);
+      onChange({ name, value: newValue });
+    },
+    [value, name, onChange]
+  );
+
+  const onFocus = useCallback(() => setIsFocused(true), []);
+
+  const onBlur = useCallback(() => {
+    setIsFocused(false);
+
+    const newValue = value.reduce((acc: KeyValue[], v) => {
+      if (v.key || v.value) {
+        acc.push(v);
+      }
+      return acc;
+    }, []);
+
+    if (newValue.length !== value.length) {
+      onChange({ name, value: newValue });
+    }
+  }, [value, name, onChange]);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        isFocused && styles.isFocused,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning
+      )}
+    >
+      {[...value, { key: '', value: '' }].map((v, index) => (
+        <KeyValueListInputItem
+          key={index}
+          index={index}
+          keyValue={v.key}
+          value={v.value}
+          keyPlaceholder={keyPlaceholder}
+          valuePlaceholder={valuePlaceholder}
+          isNew={index === value.length}
+          onChange={handleItemChange}
+          onRemove={handleRemoveItem}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -5,13 +5,19 @@
 
   &:last-child {
     margin-bottom: 0;
+    border-bottom: 0;
   }
 }
 
-.inputWrapper {
+.keyInputWrapper {
   flex: 1 0 0;
 }
 
+.valueInputWrapper {
+  flex: 1 0 0;
+  min-width: 40px;
+}
+
 .buttonWrapper {
   flex: 0 0 22px;
 }
@@ -20,6 +26,10 @@
 .valueInput {
   width: 100%;
   border: none;
-  background-color: var(--inputBackgroundColor);
+  background-color: transparent;
   color: var(--textColor);
+
+  &::placeholder {
+    color: var(--helpTextColor);
+  }
 }

frontend/src/Components/Form/KeyValueListInputItem.css.d.ts

@@ -2,10 +2,11 @@
 // Please do not change this file!
 interface CssExports {
   'buttonWrapper': string;
-  'inputWrapper': string;
   'itemContainer': string;
   'keyInput': string;
+  'keyInputWrapper': string;
   'valueInput': string;
+  'valueInputWrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -1,124 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import { icons } from 'Helpers/Props';
-import TextInput from './TextInput';
-import styles from './KeyValueListInputItem.css';
-
-class KeyValueListInputItem extends Component {
-
-  //
-  // Listeners
-
-  onKeyChange = ({ value: keyValue }) => {
-    const {
-      index,
-      value,
-      onChange
-    } = this.props;
-
-    onChange(index, { key: keyValue, value });
-  };
-
-  onValueChange = ({ value }) => {
-    // TODO: Validate here or validate at a lower level component
-
-    const {
-      index,
-      keyValue,
-      onChange
-    } = this.props;
-
-    onChange(index, { key: keyValue, value });
-  };
-
-  onRemovePress = () => {
-    const {
-      index,
-      onRemove
-    } = this.props;
-
-    onRemove(index);
-  };
-
-  onFocus = () => {
-    this.props.onFocus();
-  };
-
-  onBlur = () => {
-    this.props.onBlur();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      keyValue,
-      value,
-      keyPlaceholder,
-      valuePlaceholder,
-      isNew
-    } = this.props;
-
-    return (
-      <div className={styles.itemContainer}>
-        <div className={styles.inputWrapper}>
-          <TextInput
-            className={styles.keyInput}
-            name="key"
-            value={keyValue}
-            placeholder={keyPlaceholder}
-            onChange={this.onKeyChange}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-          />
-        </div>
-
-        <div className={styles.inputWrapper}>
-          <TextInput
-            className={styles.valueInput}
-            name="value"
-            value={value}
-            placeholder={valuePlaceholder}
-            onChange={this.onValueChange}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-          />
-        </div>
-
-        <div className={styles.buttonWrapper}>
-          {
-            isNew ?
-              null :
-              <IconButton
-                name={icons.REMOVE}
-                tabIndex={-1}
-                onPress={this.onRemovePress}
-              />
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-KeyValueListInputItem.propTypes = {
-  index: PropTypes.number,
-  keyValue: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  keyPlaceholder: PropTypes.string.isRequired,
-  valuePlaceholder: PropTypes.string.isRequired,
-  isNew: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired
-};
-
-KeyValueListInputItem.defaultProps = {
-  keyPlaceholder: 'Key',
-  valuePlaceholder: 'Value'
-};
-
-export default KeyValueListInputItem;

frontend/src/Components/Form/KeyValueListInputItem.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+interface KeyValueListInputItemProps {
+  index: number;
+  keyValue: string;
+  value: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  isNew: boolean;
+  onChange: (index: number, itemValue: { key: string; value: string }) => void;
+  onRemove: (index: number) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+function KeyValueListInputItem({
+  index,
+  keyValue,
+  value,
+  keyPlaceholder = 'Key',
+  valuePlaceholder = 'Value',
+  isNew,
+  onChange,
+  onRemove,
+  onFocus,
+  onBlur,
+}: KeyValueListInputItemProps): JSX.Element {
+  const handleKeyChange = useCallback(
+    ({ value: keyValue }: { value: string }) => {
+      onChange(index, { key: keyValue, value });
+    },
+    [index, value, onChange]
+  );
+
+  const handleValueChange = useCallback(
+    ({ value }: { value: string }) => {
+      onChange(index, { key: keyValue, value });
+    },
+    [index, keyValue, onChange]
+  );
+
+  const handleRemovePress = useCallback(() => {
+    onRemove(index);
+  }, [index, onRemove]);
+
+  return (
+    <div className={styles.itemContainer}>
+      <div className={styles.keyInputWrapper}>
+        <TextInput
+          className={styles.keyInput}
+          name="key"
+          value={keyValue}
+          placeholder={keyPlaceholder}
+          onChange={handleKeyChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </div>
+
+      <div className={styles.valueInputWrapper}>
+        <TextInput
+          className={styles.valueInput}
+          name="value"
+          value={value}
+          placeholder={valuePlaceholder}
+          onChange={handleValueChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </div>
+
+      <div className={styles.buttonWrapper}>
+        {isNew ? null : (
+          <IconButton
+            name={icons.REMOVE}
+            tabIndex={-1}
+            onPress={handleRemovePress}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default KeyValueListInputItem;

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -14,6 +14,8 @@ function getType({ type, selectOptionsProviderAction }) {
       return inputTypes.CHECK;
     case 'device':
       return inputTypes.DEVICE;
+    case 'keyValueList':
+      return inputTypes.KEY_VALUE_LIST;
     case 'playlist':
       return inputTypes.PLAYLIST;
     case 'password':

frontend/src/Components/Modal/Modal.css

@@ -83,13 +83,6 @@
 }
 
 @media only screen and (max-width: $breakpointMedium) {
-  .modal.small,
-  .modal.medium {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: $breakpointSmall) {
   .modalContainer {
     position: fixed;
   }

frontend/src/Components/SignalRConnector.js

@@ -172,7 +172,7 @@ class SignalRConnector extends Component {
     const status = resource.status;
 
     // Both successful and failed commands need to be
-    // completed, otherwise they spin until they timeout.
+    // completed, otherwise they spin until they time out.
 
     if (status === 'completed' || status === 'failed') {
       this.props.dispatchFinishCommand(resource);
@@ -224,10 +224,58 @@ class SignalRConnector extends Component {
     repopulatePage('trackFileUpdated');
   };
 
+  handleDownloadclient = ({ action, resource }) => {
+    const section = 'settings.downloadClients';
+
+    if (action === 'created' || action === 'updated') {
+      this.props.dispatchUpdateItem({ section, ...resource });
+    } else if (action === 'deleted') {
+      this.props.dispatchRemoveItem({ section, id: resource.id });
+    }
+  };
+
   handleHealth = () => {
     this.props.dispatchFetchHealth();
   };
 
+  handleImportlist = ({ action, resource }) => {
+    const section = 'settings.importLists';
+
+    if (action === 'created' || action === 'updated') {
+      this.props.dispatchUpdateItem({ section, ...resource });
+    } else if (action === 'deleted') {
+      this.props.dispatchRemoveItem({ section, id: resource.id });
+    }
+  };
+
+  handleIndexer = ({ action, resource }) => {
+    const section = 'settings.indexers';
+
+    if (action === 'created' || action === 'updated') {
+      this.props.dispatchUpdateItem({ section, ...resource });
+    } else if (action === 'deleted') {
+      this.props.dispatchRemoveItem({ section, id: resource.id });
+    }
+  };
+
+  handleMetadata = ({ action, resource }) => {
+    const section = 'settings.metadata';
+
+    if (action === 'updated') {
+      this.props.dispatchUpdateItem({ section, ...resource });
+    }
+  };
+
+  handleNotification = ({ action, resource }) => {
+    const section = 'settings.notifications';
+
+    if (action === 'created' || action === 'updated') {
+      this.props.dispatchUpdateItem({ section, ...resource });
+    } else if (action === 'deleted') {
+      this.props.dispatchRemoveItem({ section, id: resource.id });
+    }
+  };
+
   handleArtist = (body) => {
     const action = body.action;
     const section = 'artist';

frontend/src/Components/Table/Cells/TableRowCell.css

@@ -4,7 +4,7 @@
   line-height: 1.52857143;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Cells/VirtualTableRowCell.css

@@ -7,7 +7,7 @@
   white-space: nowrap;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .cell {
     white-space: nowrap;
   }

frontend/src/Components/Table/Table.css

@@ -10,7 +10,7 @@
   border-collapse: collapse;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .tableContainer {
     min-width: 100%;
     width: fit-content;

frontend/src/Components/Table/TableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

frontend/src/Components/Table/TablePager.css

@@ -60,7 +60,7 @@
   height: 25px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .pager {
     flex-wrap: wrap;
   }

frontend/src/Components/Table/VirtualTableHeaderCell.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 
-@media only screen and (max-width: $breakpointSmall) {
+@media only screen and (max-width: $breakpointMedium) {
   .headerCell {
     white-space: nowrap;
   }

frontend/src/Content/Images/Icons/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/Content/Images/Icons/mstile-150x150.png"/>
-            <TileColor>#00ccff</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

frontend/src/Content/Images/Icons/manifest.json

@@ -1,19 +0,0 @@
-{
-    "name": "Lidarr",
-    "icons": [
-        {
-            "src": "android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "start_url": "../../../../",
-    "theme_color": "#3a3f51",
-    "background_color": "#3a3f51",
-    "display": "standalone"
-}

frontend/src/Content/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+	<msapplication>
+		<tile>
+			<square150x150logo src="__URL_BASE__/Content/Images/Icons/mstile-150x150.png" />
+			<TileColor>
+				#00ccff
+			</TileColor>
+		</tile>
+	</msapplication>
+</browserconfig>

frontend/src/Content/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "__INSTANCE_NAME__",
+  "icons": [
+    {
+      "src": "__URL_BASE__/Content/Images/Icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "__URL_BASE__/Content/Images/Icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "__URL_BASE__/",
+  "theme_color": "#3a3f51",
+  "background_color": "#3a3f51",
+  "display": "standalone"
+}

frontend/src/Helpers/Props/inputTypes.js

@@ -2,8 +2,8 @@ export const AUTO_COMPLETE = 'autoComplete';
 export const CAPTCHA = 'captcha';
 export const CHECK = 'check';
 export const DEVICE = 'device';
-export const PLAYLIST = 'playlist';
 export const KEY_VALUE_LIST = 'keyValueList';
+export const PLAYLIST = 'playlist';
 export const MONITOR_ALBUMS_SELECT = 'monitorAlbumsSelect';
 export const MONITOR_NEW_ITEMS_SELECT = 'monitorNewItemsSelect';
 export const FLOAT = 'float';
@@ -34,8 +34,8 @@ export const all = [
   CAPTCHA,
   CHECK,
   DEVICE,
-  PLAYLIST,
   KEY_VALUE_LIST,
+  PLAYLIST,
   MONITOR_ALBUMS_SELECT,
   MONITOR_NEW_ITEMS_SELECT,
   FLOAT,

frontend/src/Search/AddNewItem.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
@@ -130,7 +131,8 @@ class AddNewItem extends Component {
                 <div className={styles.helpText}>
                   {translate('FailedLoadingSearchResults')}
                 </div>
-                <div>{getErrorMessage(error)}</div>
+
+                <Alert kind={kinds.DANGER}>{getErrorMessage(error)}</Alert>
               </div> : null
           }
 

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import EditCustomFormatModal from './EditCustomFormatModal';
+import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
 
 function mapStateToProps() {
   return {};
@@ -36,6 +37,7 @@ class EditCustomFormatModalConnector extends Component {
 }
 
 EditCustomFormatModalConnector.propTypes = {
+  ...EditCustomFormatModalContentConnector.propTypes,
   onModalClose: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalContent.tsx

@@ -10,11 +10,11 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import Column from 'Components/Table/Column';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { kinds } from 'Helpers/Props';
-import SortDirection from 'Helpers/Props/SortDirection';
 import {
   bulkDeleteCustomFormats,
   bulkEditCustomFormats,
@@ -34,7 +34,7 @@ type OnSelectedChangeCallback = React.ComponentProps<
   typeof ManageCustomFormatsModalRow
 >['onSelectedChange'];
 
-const COLUMNS = [
+const COLUMNS: Column[] = [
   {
     name: 'name',
     label: () => translate('Name'),
@@ -47,12 +47,15 @@ const COLUMNS = [
     isSortable: true,
     isVisible: true,
   },
+  {
+    name: 'actions',
+    label: '',
+    isVisible: true,
+  },
 ];
 
 interface ManageCustomFormatsModalContentProps {
   onModalClose(): void;
-  sortKey?: string;
-  sortDirection?: SortDirection;
 }
 
 function ManageCustomFormatsModalContent(

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css

@@ -4,3 +4,9 @@
 
   word-break: break-all;
 }
+
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 40px;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'actions': string;
   'includeCustomFormatWhenRenaming': string;
   'name': string;
 }

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsModalRow.tsx

@@ -1,10 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
+import { deleteCustomFormat } from 'Store/Actions/settingsActions';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
+import EditCustomFormatModalConnector from '../EditCustomFormatModalConnector';
 import styles from './ManageCustomFormatsModalRow.css';
 
 interface ManageCustomFormatsModalRowProps {
@@ -16,6 +24,15 @@ interface ManageCustomFormatsModalRowProps {
   onSelectedChange(result: SelectStateInputProps): void;
 }
 
+function isDeletingSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.customFormats.isDeleting,
+    (isDeleting) => {
+      return isDeleting;
+    }
+  );
+}
+
 function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
   const {
     id,
@@ -25,7 +42,16 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     onSelectedChange,
   } = props;
 
-  const onSelectedChangeWrapper = useCallback(
+  const dispatch = useDispatch();
+  const isDeleting = useSelector(isDeletingSelector());
+
+  const [isEditCustomFormatModalOpen, setIsEditCustomFormatModalOpen] =
+    useState(false);
+
+  const [isDeleteCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen] =
+    useState(false);
+
+  const handlelectedChange = useCallback(
     (result: SelectStateInputProps) => {
       onSelectedChange({
         ...result,
@@ -34,12 +60,33 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
     [onSelectedChange]
   );
 
+  const handleEditCustomFormatModalOpen = useCallback(() => {
+    setIsEditCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleEditCustomFormatModalClose = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+  }, [setIsEditCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatPress = useCallback(() => {
+    setIsEditCustomFormatModalOpen(false);
+    setIsDeleteCustomFormatModalOpen(true);
+  }, [setIsEditCustomFormatModalOpen, setIsDeleteCustomFormatModalOpen]);
+
+  const handleDeleteCustomFormatModalClose = useCallback(() => {
+    setIsDeleteCustomFormatModalOpen(false);
+  }, [setIsDeleteCustomFormatModalOpen]);
+
+  const handleConfirmDeleteCustomFormat = useCallback(() => {
+    dispatch(deleteCustomFormat({ id }));
+  }, [id, dispatch]);
+
   return (
     <TableRow>
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={onSelectedChangeWrapper}
+        onSelectedChange={handlelectedChange}
       />
 
       <TableRowCell className={styles.name}>{name}</TableRowCell>
@@ -47,6 +94,31 @@ function ManageCustomFormatsModalRow(props: ManageCustomFormatsModalRowProps) {
       <TableRowCell className={styles.includeCustomFormatWhenRenaming}>
         {includeCustomFormatWhenRenaming ? translate('Yes') : translate('No')}
       </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          name={icons.EDIT}
+          onPress={handleEditCustomFormatModalOpen}
+        />
+      </TableRowCell>
+
+      <EditCustomFormatModalConnector
+        id={id}
+        isOpen={isEditCustomFormatModalOpen}
+        onModalClose={handleEditCustomFormatModalClose}
+        onDeleteCustomFormatPress={handleDeleteCustomFormatPress}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteCustomFormatModalOpen}
+        kind="danger"
+        title={translate('DeleteCustomFormat')}
+        message={translate('DeleteCustomFormatMessageText', { name })}
+        confirmLabel={translate('Delete')}
+        isSpinning={isDeleting}
+        onConfirm={handleConfirmDeleteCustomFormat}
+        onCancel={handleDeleteCustomFormatModalClose}
+      />
     </TableRow>
   );
 }

frontend/src/Settings/CustomFormats/CustomFormats/Manage/ManageCustomFormatsToolbarButton.tsx

@@ -12,7 +12,7 @@ function ManageCustomFormatsToolbarButton() {
   return (
     <>
       <PageToolbarButton
-        label={translate('ManageCustomFormats')}
+        label={translate('ManageFormats')}
         iconName={icons.MANAGE}
         onPress={openManageModal}
       />

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: 'This condition matches using Regular Expressions. Note that the characters <code>\\^$.|?*+()[{</code> have special meanings and need escaping with a <code>\\</code>' }} />
-                  {'More details'} <Link to="https://www.regular-expressions.info/tutorial.html">{'Here'}</Link>
+                  <InlineMarkdown data={translate('ConditionUsingRegularExpressions')} />
                 </div>
                 <div>
-                  {'Regular expressions can be tested '}
-                  <Link to="http://regexstorm.net/tester">Here</Link>
+                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink', { url: 'https://www.regular-expressions.info/tutorial.html' })} />
+                </div>
+                <div>
+                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested', { url: 'http://regexstorm.net/tester' })} />
                 </div>
               </Alert>
           }

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -10,11 +10,11 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import Column from 'Components/Table/Column';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { kinds } from 'Helpers/Props';
-import SortDirection from 'Helpers/Props/SortDirection';
 import {
   bulkDeleteDownloadClients,
   bulkEditDownloadClients,
@@ -35,7 +35,7 @@ type OnSelectedChangeCallback = React.ComponentProps<
   typeof ManageDownloadClientsModalRow
 >['onSelectedChange'];
 
-const COLUMNS = [
+const COLUMNS: Column[] = [
   {
     name: 'name',
     label: () => translate('Name'),
@@ -82,8 +82,6 @@ const COLUMNS = [
 
 interface ManageDownloadClientsModalContentProps {
   onModalClose(): void;
-  sortKey?: string;
-  sortDirection?: SortDirection;
 }
 
 function ManageDownloadClientsModalContent(

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -292,7 +292,7 @@ function EditImportListModalContent(props) {
                   <FormInputGroup
                     type={inputTypes.TAG}
                     name="tags"
-                    helpText={translate('TagsHelpText')}
+                    helpText={translate('ImportListTagsHelpText')}
                     {...tags}
                     onChange={onInputChange}
                   />

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx

@@ -10,11 +10,11 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import Column from 'Components/Table/Column';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { kinds } from 'Helpers/Props';
-import SortDirection from 'Helpers/Props/SortDirection';
 import {
   bulkDeleteIndexers,
   bulkEditIndexers,
@@ -35,7 +35,7 @@ type OnSelectedChangeCallback = React.ComponentProps<
   typeof ManageIndexersModalRow
 >['onSelectedChange'];
 
-const COLUMNS = [
+const COLUMNS: Column[] = [
   {
     name: 'name',
     label: () => translate('Name'),
@@ -82,8 +82,6 @@ const COLUMNS = [
 
 interface ManageIndexersModalContentProps {
   onModalClose(): void;
-  sortKey?: string;
-  sortDirection?: SortDirection;
 }
 
 function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {

frontend/src/Settings/MediaManagement/RootFolder/RootFolder.js

@@ -94,9 +94,9 @@ class RootFolder extends Component {
         <ConfirmModal
           isOpen={this.state.isDeleteRootFolderModalOpen}
           kind={kinds.DANGER}
-          title={translate('DeleteRootFolder')}
-          message={translate('DeleteRootFolderMessageText', { name })}
-          confirmLabel={translate('Delete')}
+          title={translate('RemoveRootFolder')}
+          message={translate('RemoveRootFolderArtistsMessageText', { name })}
+          confirmLabel={translate('Remove')}
           onConfirm={this.onConfirmDeleteRootFolder}
           onCancel={this.onDeleteRootFolderModalClose}
         />

frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js

@@ -105,7 +105,7 @@ function EditNotificationModalContent(props) {
                 <FormInputGroup
                   type={inputTypes.TAG}
                   name="tags"
-                  helpText={translate('TagsHelpText')}
+                  helpText={translate('NotificationsTagsArtistHelpText')}
                   {...tags}
                   onChange={onInputChange}
                 />

frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js

@@ -87,9 +87,9 @@ function EditDelayProfileModalContent(props) {
 
         {
           !isFetching && !!error ?
-            <div>
-              {translate('UnableToAddANewQualityProfilePleaseTryAgain')}
-            </div> :
+            <Alert kind={kinds.DANGER}>
+              {translate('AddDelayProfileError')}
+            </Alert> :
             null
         }
 
@@ -186,7 +186,7 @@ function EditDelayProfileModalContent(props) {
               {
                 id === 1 ?
                   <Alert>
-                    {translate('DefaultDelayProfileHelpText')}
+                    {translate('DefaultDelayProfileArtist')}
                   </Alert> :
 
                   <FormGroup>
@@ -196,7 +196,7 @@ function EditDelayProfileModalContent(props) {
                       type={inputTypes.TAG}
                       name="tags"
                       {...tags}
-                      helpText={translate('TagsHelpText')}
+                      helpText={translate('DelayProfileArtistTagsHelpText')}
                       onChange={onInputChange}
                     />
                   </FormGroup>

frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js

@@ -119,7 +119,7 @@ function EditReleaseProfileModalContent(props) {
             <FormInputGroup
               type={inputTypes.TAG}
               name="tags"
-              helpText={translate('TagsHelpText')}
+              helpText={translate('ReleaseProfileTagArtistHelpText')}
               {...tags}
               onChange={onInputChange}
             />

frontend/src/Settings/Quality/Definition/QualityDefinition.css

@@ -24,19 +24,19 @@
   height: 20px;
 }
 
-.bar {
+.track {
   top: 9px;
   margin: 0 5px;
   height: 3px;
   background-color: var(--sliderAccentColor);
   box-shadow: 0 0 0 #000;
 
-  &:nth-child(3n+1) {
+  &:nth-child(3n + 1) {
     background-color: #ddd;
   }
 }
 
-.handle {
+.thumb {
   top: 1px;
   z-index: 0 !important;
   width: 18px;

frontend/src/Settings/Quality/Definition/QualityDefinition.css.d.ts

@@ -1,8 +1,6 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'bar': string;
-  'handle': string;
   'kilobitsPerSecond': string;
   'quality': string;
   'qualityDefinition': string;
@@ -10,7 +8,9 @@ interface CssExports {
   'sizeLimit': string;
   'sizes': string;
   'slider': string;
+  'thumb': string;
   'title': string;
+  'track': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Settings/Quality/Definition/QualityDefinition.js

@@ -55,6 +55,27 @@ class QualityDefinition extends Component {
     };
   }
 
+  //
+  // Control
+
+  trackRenderer(props, state) {
+    return (
+      <div
+        {...props}
+        className={styles.track}
+      />
+    );
+  }
+
+  thumbRenderer(props, state) {
+    return (
+      <div
+        {...props}
+        className={styles.thumb}
+      />
+    );
+  }
+
   //
   // Listeners
 
@@ -174,6 +195,7 @@ class QualityDefinition extends Component {
 
         <div className={styles.sizeLimit}>
           <ReactSlider
+            className={styles.slider}
             min={slider.min}
             max={slider.max}
             step={slider.step}
@@ -182,9 +204,9 @@ class QualityDefinition extends Component {
             withTracks={true}
             allowCross={false}
             snapDragDisabled={true}
-            className={styles.slider}
-            trackClassName={styles.bar}
-            thumbClassName={styles.handle}
+            pearling={true}
+            renderThumb={this.thumbRenderer}
+            renderTrack={this.trackRenderer}
             onChange={this.onSliderChange}
             onAfterChange={this.onAfterSliderChange}
           />

frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js

@@ -86,10 +86,10 @@ function EditSpecificationModalContent(props) {
                   <InlineMarkdown data={translate('ConditionUsingRegularExpressions')} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink')} />
+                  <InlineMarkdown data={translate('RegularExpressionsTutorialLink', { url: 'https://www.regular-expressions.info/tutorial.html' })} />
                 </div>
                 <div>
-                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested')} />
+                  <InlineMarkdown data={translate('RegularExpressionsCanBeTested', { url: 'http://regexstorm.net/tester' })} />
                 </div>
               </Alert>
           }

frontend/src/Settings/Tags/TagsConnector.js

@@ -4,11 +4,13 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDelayProfiles, fetchDownloadClients, fetchImportLists, fetchIndexers, fetchNotifications, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
 import { fetchTagDetails, fetchTags } from 'Store/Actions/tagActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Tags from './Tags';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.tags,
+    createSortedSectionSelector('tags', sortByProp('label')),
     (tags) => {
       const isFetching = tags.isFetching || tags.details.isFetching;
       const error = tags.error || tags.details.error;

frontend/src/Store/Actions/artistIndexActions.js

@@ -151,7 +151,7 @@ export const defaultState = {
     {
       name: 'genres',
       label: () => translate('Genres'),
-      isSortable: false,
+      isSortable: true,
       isVisible: false
     },
     {

frontend/src/Store/Actions/historyActions.js

@@ -150,7 +150,7 @@ export const defaultState = {
     },
     {
       key: 'importFailed',
-      label: () => translate('ImportFailed'),
+      label: () => translate('ImportCompleteFailed'),
       filters: [
         {
           key: 'eventType',

frontend/src/Store/Selectors/createArtistAlbumsSelector.ts

@@ -1,4 +1,5 @@
 import { createSelector } from 'reselect';
+import AlbumAppState from 'App/State/AlbumAppState';
 import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
 import { createArtistSelectorForHook } from './createArtistSelector';
@@ -7,7 +8,7 @@ function createArtistAlbumsSelector(artistId: number) {
   return createSelector(
     (state: AppState) => state.albums,
     createArtistSelectorForHook(artistId),
-    (albums, artist = {} as Artist) => {
+    (albums: AlbumAppState, artist = {} as Artist) => {
       const { isFetching, isPopulated, error, items } = albums;
 
       const filteredAlbums = items.filter(

frontend/src/Store/Selectors/createArtistMetadataProfileSelector.ts

@@ -1,13 +1,14 @@
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
+import MetadataProfile from 'typings/MetadataProfile';
 import { createArtistSelectorForHook } from './createArtistSelector';
 
 function createArtistMetadataProfileSelector(artistId: number) {
   return createSelector(
     (state: AppState) => state.settings.metadataProfiles.items,
     createArtistSelectorForHook(artistId),
-    (metadataProfiles, artist = {} as Artist) => {
+    (metadataProfiles: MetadataProfile[], artist = {} as Artist) => {
       return metadataProfiles.find((profile) => {
         return profile.id === artist.metadataProfileId;
       });

frontend/src/Store/Selectors/createArtistQualityProfileSelector.ts

@@ -1,13 +1,14 @@
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
+import QualityProfile from 'typings/QualityProfile';
 import { createArtistSelectorForHook } from './createArtistSelector';
 
 function createArtistQualityProfileSelector(artistId: number) {
   return createSelector(
     (state: AppState) => state.settings.qualityProfiles.items,
     createArtistSelectorForHook(artistId),
-    (qualityProfiles, artist = {} as Artist) => {
+    (qualityProfiles: QualityProfile[], artist = {} as Artist) => {
       return qualityProfiles.find(
         (profile) => profile.id === artist.qualityProfileId
       );

frontend/src/System/Logs/Files/LogFiles.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
-import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
@@ -77,15 +77,16 @@ class LogFiles extends Component {
         <PageContentBody>
           <Alert>
             <div>
-              Log files are located in: {location}
+              {translate('LogFilesLocation', {
+                location
+              })}
             </div>
 
-            {
-              currentLogView === 'Log Files' &&
-                <div>
-                  The log level defaults to 'Info' and can be changed in <Link to="/settings/general">General Settings</Link>
-                </div>
-            }
+            {currentLogView === 'Log Files' ? (
+              <div>
+                <InlineMarkdown data={translate('TheLogLevelDefault')} />
+              </div>
+            ) : null}
           </Alert>
 
           {

frontend/src/System/Updates/UpdateChanges.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import styles from './UpdateChanges.css';
-
-class UpdateChanges extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      changes
-    } = this.props;
-
-    if (changes.length === 0) {
-      return null;
-    }
-
-    const uniqueChanges = [...new Set(changes)];
-
-    return (
-      <div>
-        <div className={styles.title}>{title}</div>
-        <ul>
-          {
-            uniqueChanges.map((change, index) => {
-              return (
-                <li key={index}>
-                  <InlineMarkdown data={change} />
-                </li>
-              );
-            })
-          }
-        </ul>
-      </div>
-    );
-  }
-
-}
-
-UpdateChanges.propTypes = {
-  title: PropTypes.string.isRequired,
-  changes: PropTypes.arrayOf(PropTypes.string)
-};
-
-export default UpdateChanges;

frontend/src/System/Updates/UpdateChanges.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import styles from './UpdateChanges.css';
+
+interface UpdateChangesProps {
+  title: string;
+  changes: string[];
+}
+
+function UpdateChanges(props: UpdateChangesProps) {
+  const { title, changes } = props;
+
+  if (changes.length === 0) {
+    return null;
+  }
+
+  const uniqueChanges = [...new Set(changes)];
+
+  return (
+    <div>
+      <div className={styles.title}>{title}</div>
+      <ul>
+        {uniqueChanges.map((change, index) => {
+          const checkChange = change.replace(
+            /#\d{4,5}\b/g,
+            (match) =>
+              `[${match}](https://github.com/Lidarr/Lidarr/issues/${match.substring(
+                1
+              )})`
+          );
+
+          return (
+            <li key={index}>
+              <InlineMarkdown data={checkChange} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default UpdateChanges;

frontend/src/System/Updates/Updates.js

@@ -1,249 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import Alert from 'Components/Alert';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import { icons, kinds } from 'Helpers/Props';
-import formatDate from 'Utilities/Date/formatDate';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import translate from 'Utilities/String/translate';
-import UpdateChanges from './UpdateChanges';
-import styles from './Updates.css';
-
-class Updates extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      currentVersion,
-      isFetching,
-      isPopulated,
-      updatesError,
-      generalSettingsError,
-      items,
-      isInstallingUpdate,
-      updateMechanism,
-      updateMechanismMessage,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      onInstallLatestPress
-    } = this.props;
-
-    const hasError = !!(updatesError || generalSettingsError);
-    const hasUpdates = isPopulated && !hasError && items.length > 0;
-    const noUpdates = isPopulated && !hasError && !items.length;
-    const hasUpdateToInstall = hasUpdates && _.some(items, { installable: true, latest: true });
-    const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;
-
-    const externalUpdaterPrefix = 'Unable to update Lidarr directly,';
-    const externalUpdaterMessages = {
-      external: 'Lidarr is configured to use an external update mechanism',
-      apt: 'use apt to install the update',
-      docker: 'update the docker container to receive the update'
-    };
-
-    return (
-      <PageContent title={translate('Updates')}>
-        <PageContentBody>
-          {
-            !isPopulated && !hasError &&
-              <LoadingIndicator />
-          }
-
-          {
-            noUpdates &&
-              <Alert kind={kinds.INFO}>
-                {translate('NoUpdatesAreAvailable')}
-              </Alert>
-          }
-
-          {
-            hasUpdateToInstall &&
-              <div className={styles.messageContainer}>
-                {
-                  updateMechanism === 'builtIn' || updateMechanism === 'script' ?
-                    <SpinnerButton
-                      className={styles.updateAvailable}
-                      kind={kinds.PRIMARY}
-                      isSpinning={isInstallingUpdate}
-                      onPress={onInstallLatestPress}
-                    >
-                      Install Latest
-                    </SpinnerButton> :
-
-                    <Fragment>
-                      <Icon
-                        name={icons.WARNING}
-                        kind={kinds.WARNING}
-                        size={30}
-                      />
-
-                      <div className={styles.message}>
-                        {externalUpdaterPrefix} <InlineMarkdown data={updateMechanismMessage || externalUpdaterMessages[updateMechanism] || externalUpdaterMessages.external} />
-                      </div>
-                    </Fragment>
-                }
-
-                {
-                  isFetching &&
-                    <LoadingIndicator
-                      className={styles.loading}
-                      size={20}
-                    />
-                }
-              </div>
-          }
-
-          {
-            noUpdateToInstall &&
-              <div className={styles.messageContainer}>
-                <Icon
-                  className={styles.upToDateIcon}
-                  name={icons.CHECK_CIRCLE}
-                  size={30}
-                />
-                <div className={styles.message}>
-                  The latest version of Lidarr is already installed
-                </div>
-
-                {
-                  isFetching &&
-                    <LoadingIndicator
-                      className={styles.loading}
-                      size={20}
-                    />
-                }
-              </div>
-          }
-
-          {
-            hasUpdates &&
-              <div>
-                {
-                  items.map((update) => {
-                    const hasChanges = !!update.changes;
-
-                    return (
-                      <div
-                        key={update.version}
-                        className={styles.update}
-                      >
-                        <div className={styles.info}>
-                          <div className={styles.version}>{update.version}</div>
-                          <div className={styles.space}>&mdash;</div>
-                          <div
-                            className={styles.date}
-                            title={formatDateTime(update.releaseDate, longDateFormat, timeFormat)}
-                          >
-                            {formatDate(update.releaseDate, shortDateFormat)}
-                          </div>
-
-                          {
-                            update.branch === 'master' ?
-                              null :
-                              <Label
-                                className={styles.label}
-                              >
-                                {update.branch}
-                              </Label>
-                          }
-
-                          {
-                            update.version === currentVersion ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.SUCCESS}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                Currently Installed
-                              </Label> :
-                              null
-                          }
-
-                          {
-                            update.version !== currentVersion && update.installedOn ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.INVERSE}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                Previously Installed
-                              </Label> :
-                              null
-                          }
-                        </div>
-
-                        {
-                          !hasChanges &&
-                            <div>
-                              {translate('MaintenanceRelease')}
-                            </div>
-                        }
-
-                        {
-                          hasChanges &&
-                            <div className={styles.changes}>
-                              <UpdateChanges
-                                title={translate('New')}
-                                changes={update.changes.new}
-                              />
-
-                              <UpdateChanges
-                                title={translate('Fixed')}
-                                changes={update.changes.fixed}
-                              />
-                            </div>
-                        }
-                      </div>
-                    );
-                  })
-                }
-              </div>
-          }
-
-          {
-            !!updatesError &&
-              <div>
-                Failed to fetch updates
-              </div>
-          }
-
-          {
-            !!generalSettingsError &&
-              <div>
-                Failed to update settings
-              </div>
-          }
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-
-}
-
-Updates.propTypes = {
-  currentVersion: PropTypes.string.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  updatesError: PropTypes.object,
-  generalSettingsError: PropTypes.object,
-  items: PropTypes.array.isRequired,
-  isInstallingUpdate: PropTypes.bool.isRequired,
-  updateMechanism: PropTypes.string,
-  updateMechanismMessage: PropTypes.string,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  onInstallLatestPress: PropTypes.func.isRequired
-};
-
-export default Updates;

frontend/src/System/Updates/Updates.tsx

@@ -0,0 +1,303 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
+import Alert from 'Components/Alert';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { icons, kinds } from 'Helpers/Props';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { UpdateMechanism } from 'typings/Settings/General';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import translate from 'Utilities/String/translate';
+import UpdateChanges from './UpdateChanges';
+import styles from './Updates.css';
+
+const VERSION_REGEX = /\d+\.\d+\.\d+\.\d+/i;
+
+function createUpdatesSelector() {
+  return createSelector(
+    (state: AppState) => state.system.updates,
+    (state: AppState) => state.settings.general,
+    (updates, generalSettings) => {
+      const { error: updatesError, items } = updates;
+
+      const isFetching = updates.isFetching || generalSettings.isFetching;
+      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
+
+      return {
+        isFetching,
+        isPopulated,
+        updatesError,
+        generalSettingsError: generalSettings.error,
+        items,
+        updateMechanism: generalSettings.item.updateMechanism,
+      };
+    }
+  );
+}
+
+function Updates() {
+  const currentVersion = useSelector((state: AppState) => state.app.version);
+  const { packageUpdateMechanismMessage } = useSelector(
+    createSystemStatusSelector()
+  );
+  const { shortDateFormat, longDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+  const isInstallingUpdate = useSelector(
+    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE)
+  );
+
+  const {
+    isFetching,
+    isPopulated,
+    updatesError,
+    generalSettingsError,
+    items,
+    updateMechanism,
+  } = useSelector(createUpdatesSelector());
+
+  const dispatch = useDispatch();
+  const [isMajorUpdateModalOpen, setIsMajorUpdateModalOpen] = useState(false);
+  const hasError = !!(updatesError || generalSettingsError);
+  const hasUpdates = isPopulated && !hasError && items.length > 0;
+  const noUpdates = isPopulated && !hasError && !items.length;
+
+  const externalUpdaterPrefix = translate('UpdateAppDirectlyLoadError');
+  const externalUpdaterMessages: Partial<Record<UpdateMechanism, string>> = {
+    external: translate('ExternalUpdater'),
+    apt: translate('AptUpdater'),
+    docker: translate('DockerUpdater'),
+  };
+
+  const { isMajorUpdate, hasUpdateToInstall } = useMemo(() => {
+    const majorVersion = parseInt(
+      currentVersion.match(VERSION_REGEX)?.[0] ?? '0'
+    );
+
+    const latestVersion = items[0]?.version;
+    const latestMajorVersion = parseInt(
+      latestVersion?.match(VERSION_REGEX)?.[0] ?? '0'
+    );
+
+    return {
+      isMajorUpdate: latestMajorVersion > majorVersion,
+      hasUpdateToInstall: items.some(
+        (update) => update.installable && update.latest
+      ),
+    };
+  }, [currentVersion, items]);
+
+  const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;
+
+  const handleInstallLatestPress = useCallback(() => {
+    if (isMajorUpdate) {
+      setIsMajorUpdateModalOpen(true);
+    } else {
+      dispatch(executeCommand({ name: commandNames.APPLICATION_UPDATE }));
+    }
+  }, [isMajorUpdate, setIsMajorUpdateModalOpen, dispatch]);
+
+  const handleInstallLatestMajorVersionPress = useCallback(() => {
+    setIsMajorUpdateModalOpen(false);
+
+    dispatch(
+      executeCommand({
+        name: commandNames.APPLICATION_UPDATE,
+        installMajorUpdate: true,
+      })
+    );
+  }, [setIsMajorUpdateModalOpen, dispatch]);
+
+  const handleCancelMajorVersionPress = useCallback(() => {
+    setIsMajorUpdateModalOpen(false);
+  }, [setIsMajorUpdateModalOpen]);
+
+  useEffect(() => {
+    dispatch(fetchUpdates());
+    dispatch(fetchGeneralSettings());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('Updates')}>
+      <PageContentBody>
+        {isPopulated || hasError ? null : <LoadingIndicator />}
+
+        {noUpdates ? (
+          <Alert kind={kinds.INFO}>{translate('NoUpdatesAreAvailable')}</Alert>
+        ) : null}
+
+        {hasUpdateToInstall ? (
+          <div className={styles.messageContainer}>
+            {updateMechanism === 'builtIn' || updateMechanism === 'script' ? (
+              <SpinnerButton
+                kind={kinds.PRIMARY}
+                isSpinning={isInstallingUpdate}
+                onPress={handleInstallLatestPress}
+              >
+                {translate('InstallLatest')}
+              </SpinnerButton>
+            ) : (
+              <>
+                <Icon name={icons.WARNING} kind={kinds.WARNING} size={30} />
+
+                <div className={styles.message}>
+                  {externalUpdaterPrefix}{' '}
+                  <InlineMarkdown
+                    data={
+                      packageUpdateMechanismMessage ||
+                      externalUpdaterMessages[updateMechanism] ||
+                      externalUpdaterMessages.external
+                    }
+                  />
+                </div>
+              </>
+            )}
+
+            {isFetching ? (
+              <LoadingIndicator className={styles.loading} size={20} />
+            ) : null}
+          </div>
+        ) : null}
+
+        {noUpdateToInstall && (
+          <div className={styles.messageContainer}>
+            <Icon
+              className={styles.upToDateIcon}
+              name={icons.CHECK_CIRCLE}
+              size={30}
+            />
+            <div className={styles.message}>{translate('OnLatestVersion')}</div>
+
+            {isFetching && (
+              <LoadingIndicator className={styles.loading} size={20} />
+            )}
+          </div>
+        )}
+
+        {hasUpdates && (
+          <div>
+            {items.map((update) => {
+              return (
+                <div key={update.version} className={styles.update}>
+                  <div className={styles.info}>
+                    <div className={styles.version}>{update.version}</div>
+                    <div className={styles.space}>&mdash;</div>
+                    <div
+                      className={styles.date}
+                      title={formatDateTime(
+                        update.releaseDate,
+                        longDateFormat,
+                        timeFormat
+                      )}
+                    >
+                      {formatDate(update.releaseDate, shortDateFormat)}
+                    </div>
+
+                    {update.branch === 'master' ? null : (
+                      <Label className={styles.label}>{update.branch}</Label>
+                    )}
+
+                    {update.version === currentVersion ? (
+                      <Label
+                        className={styles.label}
+                        kind={kinds.SUCCESS}
+                        title={formatDateTime(
+                          update.installedOn,
+                          longDateFormat,
+                          timeFormat
+                        )}
+                      >
+                        {translate('CurrentlyInstalled')}
+                      </Label>
+                    ) : null}
+
+                    {update.version !== currentVersion && update.installedOn ? (
+                      <Label
+                        className={styles.label}
+                        kind={kinds.INVERSE}
+                        title={formatDateTime(
+                          update.installedOn,
+                          longDateFormat,
+                          timeFormat
+                        )}
+                      >
+                        {translate('PreviouslyInstalled')}
+                      </Label>
+                    ) : null}
+                  </div>
+
+                  {update.changes ? (
+                    <div>
+                      <UpdateChanges
+                        title={translate('New')}
+                        changes={update.changes.new}
+                      />
+
+                      <UpdateChanges
+                        title={translate('Fixed')}
+                        changes={update.changes.fixed}
+                      />
+                    </div>
+                  ) : (
+                    <div>{translate('MaintenanceRelease')}</div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {updatesError ? (
+          <Alert kind={kinds.WARNING}>
+            {translate('FailedToFetchUpdates')}
+          </Alert>
+        ) : null}
+
+        {generalSettingsError ? (
+          <Alert kind={kinds.DANGER}>
+            {translate('FailedToFetchSettings')}
+          </Alert>
+        ) : null}
+
+        <ConfirmModal
+          isOpen={isMajorUpdateModalOpen}
+          kind={kinds.WARNING}
+          title={translate('InstallMajorVersionUpdate')}
+          message={
+            <div>
+              <div>{translate('InstallMajorVersionUpdateMessage')}</div>
+              <div>
+                <InlineMarkdown
+                  data={translate('InstallMajorVersionUpdateMessageLink', {
+                    domain: 'lidarr.audio',
+                    url: 'https://lidarr.audio/#downloads',
+                  })}
+                />
+              </div>
+            </div>
+          }
+          confirmLabel={translate('Install')}
+          onConfirm={handleInstallLatestMajorVersionPress}
+          onCancel={handleCancelMajorVersionPress}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default Updates;

frontend/src/System/Updates/UpdatesConnector.js

@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import Updates from './Updates';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.version,
-    createSystemStatusSelector(),
-    (state) => state.system.updates,
-    (state) => state.settings.general,
-    createUISettingsSelector(),
-    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
-    (
-      currentVersion,
-      status,
-      updates,
-      generalSettings,
-      uiSettings,
-      isInstallingUpdate
-    ) => {
-      const {
-        error: updatesError,
-        items
-      } = updates;
-
-      const isFetching = updates.isFetching || generalSettings.isFetching;
-      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
-
-      return {
-        currentVersion,
-        isFetching,
-        isPopulated,
-        updatesError,
-        generalSettingsError: generalSettings.error,
-        items,
-        isInstallingUpdate,
-        updateMechanism: generalSettings.item.updateMechanism,
-        updateMechanismMessage: status.packageUpdateMechanismMessage,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchUpdates: fetchUpdates,
-  dispatchFetchGeneralSettings: fetchGeneralSettings,
-  dispatchExecuteCommand: executeCommand
-};
-
-class UpdatesConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchUpdates();
-    this.props.dispatchFetchGeneralSettings();
-  }
-
-  //
-  // Listeners
-
-  onInstallLatestPress = () => {
-    this.props.dispatchExecuteCommand({ name: commandNames.APPLICATION_UPDATE });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <Updates
-        onInstallLatestPress={this.onInstallLatestPress}
-        {...this.props}
-      />
-    );
-  }
-}
-
-UpdatesConnector.propTypes = {
-  dispatchFetchUpdates: PropTypes.func.isRequired,
-  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
-  dispatchExecuteCommand: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(UpdatesConnector);

frontend/src/Utilities/Date/getRelativeDate.ts

@@ -6,15 +6,33 @@ import isTomorrow from 'Utilities/Date/isTomorrow';
 import isYesterday from 'Utilities/Date/isYesterday';
 import translate from 'Utilities/String/translate';
 
-function getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds = false, timeForToday = false } = {}) {
+interface GetRelativeDateOptions {
+  timeFormat?: string;
+  includeSeconds?: boolean;
+  timeForToday?: boolean;
+}
+
+function getRelativeDate(
+  date: string | undefined,
+  shortDateFormat: string,
+  showRelativeDates: boolean,
+  {
+    timeFormat,
+    includeSeconds = false,
+    timeForToday = false,
+  }: GetRelativeDateOptions = {}
+) {
   if (!date) {
-    return null;
+    return '';
   }
 
   const isTodayDate = isToday(date);
 
   if (isTodayDate && timeForToday && timeFormat) {
-    return formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds });
+    return formatTime(date, timeFormat, {
+      includeMinuteZero: true,
+      includeSeconds,
+    });
   }
 
   if (!showRelativeDates) {

frontend/src/Utilities/String/translate.ts

@@ -17,7 +17,7 @@ export async function fetchTranslations(): Promise<boolean> {
       translations = data.strings;
 
       resolve(true);
-    } catch (error) {
+    } catch {
       resolve(false);
     }
   });
@@ -27,6 +27,12 @@ export default function translate(
   key: string,
   tokens: Record<string, string | number | boolean> = {}
 ) {
+  const { isProduction = true } = window.Lidarr;
+
+  if (!isProduction && !(key in translations)) {
+    console.warn(`Missing translation for key: ${key}`);
+  }
+
   const translation = translations[key] || key;
 
   tokens.appName = 'Lidarr';

frontend/src/bootstrap.tsx

@@ -1,6 +1,6 @@
 import { createBrowserHistory } from 'history';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import createAppStore from 'Store/createAppStore';
 import App from './App/App';
 
@@ -9,9 +9,8 @@ import 'Diag/ConsoleApi';
 export async function bootstrap() {
   const history = createBrowserHistory();
   const store = createAppStore(history);
+  const container = document.getElementById('root');
 
-  render(
-    <App store={store} history={history} />,
-    document.getElementById('root')
-  );
+  const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+  root.render(<App store={store} history={history} />);
 }

frontend/src/index.ejs

@@ -33,7 +33,7 @@
       sizes="16x16"
       href="/Content/Images/Icons/favicon-16x16.png"
     />
-    <link rel="manifest" href="/Content/Images/Icons/manifest.json" crossorigin="use-credentials" />
+    <link rel="manifest" href="/Content/manifest.json" crossorigin="use-credentials" />
     <link
       rel="mask-icon"
       href="/Content/Images/Icons/safari-pinned-tab.svg"
@@ -47,7 +47,7 @@
     />
     <meta
       name="msapplication-config"
-      content="/Content/Images/Icons/browserconfig.xml"
+      content="/Content/browserconfig.xml"
     />
 
     <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">

frontend/src/index.ts

@@ -14,6 +14,32 @@ window.Lidarr = await response.json();
 __webpack_public_path__ = `${window.Lidarr.urlBase}/`;
 /* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
 
+const error = console.error;
+
+// Monkey patch console.error to filter out some warnings from React
+// TODO: Remove this after the great TypeScript migration
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function logError(...parameters: any[]) {
+  const filter = parameters.find((parameter) => {
+    return (
+      typeof parameter === 'string' &&
+      (parameter.includes(
+        'Support for defaultProps will be removed from function components in a future major release'
+      ) ||
+        parameter.includes(
+          'findDOMNode is deprecated and will be removed in the next major release'
+        ))
+    );
+  });
+
+  if (!filter) {
+    error(...parameters);
+  }
+}
+
+console.error = logError;
+
 const { bootstrap } = await import('./bootstrap');
 
 await bootstrap();

frontend/src/login.html

@@ -11,8 +11,11 @@
     <!-- Android/Apple Phone -->
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="format-detection" content="telephone=no">
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <meta name="format-detection" content="telephone=no" />
 
     <meta name="description" content="Lidarr" />
 
@@ -33,7 +36,11 @@
       sizes="16x16"
       href="/Content/Images/Icons/favicon-16x16.png"
     />
-    <link rel="manifest" href="/Content/Images/Icons/manifest.json" crossorigin="use-credentials" />
+    <link
+      rel="manifest"
+      href="/Content/manifest.json"
+      crossorigin="use-credentials"
+    />
     <link
       rel="mask-icon"
       href="/Content/Images/Icons/safari-pinned-tab.svg"
@@ -45,10 +52,7 @@
       href="/favicon.ico"
       data-no-hash
     />
-    <meta
-      name="msapplication-config"
-      content="/Content/Images/Icons/browserconfig.xml"
-    />
+    <meta name="msapplication-config" content="/Content/browserconfig.xml" />
 
     <link rel="stylesheet" type="text/css" href="/Content/styles.css" />
     <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
@@ -59,7 +63,7 @@
       body {
         background-color: var(--pageBackground);
         color: var(--textColor);
-        font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial,
+        font-family: 'Roboto', 'open sans', 'Helvetica Neue', Helvetica, Arial,
           sans-serif;
       }
 
@@ -209,9 +213,7 @@
           </div>
 
           <div class="panel-body">
-            <div class="sign-in">
-              SIGN IN TO CONTINUE
-            </div>
+            <div class="sign-in">SIGN IN TO CONTINUE</div>
 
             <form
               role="form"
@@ -230,8 +232,8 @@
                   pattern=".{1,}"
                   required
                   title="User name is required"
-                  autoFocus="true"
-                  autoCapitalize="false"
+                  autofocus="true"
+                  autocapitalize="false"
                 />
               </div>
 
@@ -282,16 +284,16 @@
   </body>
 
   <script type="text/javascript">
-    var yearSpan = document.getElementById("year");
-    yearSpan.innerHTML = "2017-" + new Date().getFullYear();
+    var yearSpan = document.getElementById('year');
+    yearSpan.innerHTML = '2017-' + new Date().getFullYear();
 
-    var copyDiv = document.getElementById("copy");
-    copyDiv.classList.remove("hidden");
+    var copyDiv = document.getElementById('copy');
+    copyDiv.classList.remove('hidden');
 
-    if (window.location.search.indexOf("loginFailed=true") > -1) {
-      var loginFailedDiv = document.getElementById("login-failed");
+    if (window.location.search.indexOf('loginFailed=true') > -1) {
+      var loginFailedDiv = document.getElementById('login-failed');
 
-      loginFailedDiv.classList.remove("hidden");
+      loginFailedDiv.classList.remove('hidden');
     }
 
     var light = {
@@ -311,7 +313,7 @@
       primaryHoverBorderColor: '#1D563D',
       failedColor: '#f05050',
       forgotPasswordColor: '#909fa7',
-      forgotPasswordAltColor: '#748690'
+      forgotPasswordAltColor: '#748690',
     };
 
     var dark = {
@@ -331,21 +333,16 @@
       primaryHoverBorderColor: '#1D563D',
       failedColor: '#f05050',
       forgotPasswordColor: '#737d83',
-      forgotPasswordAltColor: '#546067'
+      forgotPasswordAltColor: '#546067',
     };
 
-    var theme = "_THEME_";
+    var theme = '_THEME_';
     var defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    var finalTheme = theme === 'dark' || (theme === 'auto' && defaultDark) ?
-      dark :
-      light;
+    var finalTheme =
+      theme === 'dark' || (theme === 'auto' && defaultDark) ? dark : light;
 
     Object.entries(finalTheme).forEach(([key, value]) => {
-      document.documentElement.style.setProperty(
-        `--${key}`,
-        value
-      );
+      document.documentElement.style.setProperty(`--${key}`, value);
     });
-
   </script>
 </html>

frontend/src/typings/Settings/General.ts

@@ -0,0 +1,45 @@
+export type UpdateMechanism =
+  | 'builtIn'
+  | 'script'
+  | 'external'
+  | 'apt'
+  | 'docker';
+
+export default interface General {
+  bindAddress: string;
+  port: number;
+  sslPort: number;
+  enableSsl: boolean;
+  launchBrowser: boolean;
+  authenticationMethod: string;
+  authenticationRequired: string;
+  analyticsEnabled: boolean;
+  username: string;
+  password: string;
+  passwordConfirmation: string;
+  logLevel: string;
+  consoleLogLevel: string;
+  branch: string;
+  apiKey: string;
+  sslCertPath: string;
+  sslCertPassword: string;
+  urlBase: string;
+  instanceName: string;
+  applicationUrl: string;
+  updateAutomatically: boolean;
+  updateMechanism: UpdateMechanism;
+  updateScriptPath: string;
+  proxyEnabled: boolean;
+  proxyType: string;
+  proxyHostname: string;
+  proxyPort: number;
+  proxyUsername: string;
+  proxyPassword: string;
+  proxyBypassFilter: string;
+  proxyBypassLocalAddresses: boolean;
+  certificateValidation: string;
+  backupFolder: string;
+  backupInterval: number;
+  backupRetention: number;
+  id: number;
+}

frontend/src/typings/Settings/UiSettings.ts

@@ -1,4 +1,4 @@
-export interface UiSettings {
+export default interface UiSettings {
   theme: 'auto' | 'dark' | 'light';
   showRelativeDates: boolean;
   shortDateFormat: string;

frontend/src/typings/SystemStatus.ts

@@ -19,6 +19,7 @@ interface SystemStatus {
   osName: string;
   osVersion: string;
   packageUpdateMechanism: string;
+  packageUpdateMechanismMessage: string;
   runtimeName: string;
   runtimeVersion: string;
   sqliteVersion: string;

frontend/src/typings/Update.ts

@@ -0,0 +1,20 @@
+export interface Changes {
+  new: string[];
+  fixed: string[];
+}
+
+interface Update {
+  version: string;
+  branch: string;
+  releaseDate: string;
+  fileName: string;
+  url: string;
+  installed: boolean;
+  installedOn: string;
+  installable: boolean;
+  latest: boolean;
+  changes: Changes | null;
+  hash: string;
+}
+
+export default Update;

frontend/src/typings/inputs.ts

@@ -1,3 +1,10 @@
+export type InputChanged<T = unknown> = {
+  name: string;
+  value: T;
+};
+
+export type InputOnChange<T> = (change: InputChanged<T>) => void;
+
 export type CheckInputChanged = {
   name: string;
   value: boolean;

frontend/typings/Globals.d.ts

@@ -7,5 +7,6 @@ interface Window {
     theme: string;
     urlBase: string;
     version: string;
+    isProduction: boolean;
   };
 }

package.json

@@ -25,36 +25,35 @@
     "defaults"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-free": "6.4.0",
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "@fortawesome/free-regular-svg-icons": "6.4.0",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@fortawesome/fontawesome-free": "6.7.1",
+    "@fortawesome/fontawesome-svg-core": "6.7.1",
+    "@fortawesome/free-regular-svg-icons": "6.7.1",
+    "@fortawesome/free-solid-svg-icons": "6.7.1",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@juggle/resize-observer": "3.4.0",
     "@microsoft/signalr": "6.0.25",
-    "@sentry/browser": "7.51.2",
-    "@sentry/integrations": "7.51.2",
-    "@types/node": "18.19.31",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
-    "ansi-colors": "4.1.3",
-    "classnames": "2.3.2",
+    "@sentry/browser": "7.119.1",
+    "@sentry/integrations": "7.119.1",
+    "@types/node": "20.16.11",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "classnames": "2.5.1",
     "clipboard": "2.0.11",
     "connected-react-router": "6.9.3",
     "element-class": "0.2.2",
-    "filesize": "10.0.7",
+    "filesize": "10.1.6",
     "fuse.js": "6.6.2",
     "history": "4.10.1",
     "jdu": "1.0.0",
-    "jquery": "3.7.0",
+    "jquery": "3.7.1",
     "lodash": "4.17.21",
     "mobile-detect": "1.4.5",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
     "mousetrap": "1.6.5",
     "normalize.css": "8.0.1",
     "prop-types": "15.8.1",
-    "qs": "6.11.1",
-    "react": "17.0.2",
+    "qs": "6.13.0",
+    "react": "18.3.1",
     "react-addons-shallow-compare": "15.6.3",
     "react-async-script": "1.2.0",
     "react-autosuggest": "10.1.0",
@@ -64,8 +63,8 @@
     "react-dnd-multi-backend": "6.0.2",
     "react-dnd-touch-backend": "14.1.1",
     "react-document-title": "2.0.3",
-    "react-dom": "17.0.2",
-    "react-focus-lock": "2.5.0",
+    "react-dom": "18.3.1",
+    "react-focus-lock": "2.9.4",
     "react-google-recaptcha": "2.1.0",
     "react-lazyload": "3.2.0",
     "react-measure": "1.4.7",
@@ -75,59 +74,59 @@
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-slider": "1.1.4",
-    "react-tabs": "3.2.2",
+    "react-tabs": "4.3.0",
     "react-text-truncate": "0.19.0",
     "react-use-measure": "2.1.1",
     "react-virtualized": "9.21.1",
-    "react-window": "1.8.9",
-    "redux": "4.1.0",
+    "react-window": "1.8.10",
+    "redux": "4.2.1",
     "redux-actions": "2.6.5",
     "redux-batched-actions": "0.5.0",
     "redux-localstorage": "0.4.1",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.2",
     "reselect": "4.1.8",
     "stacktrace-js": "2.0.2",
-    "typescript": "5.1.6"
+    "typescript": "5.7.2"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/eslint-parser": "7.25.1",
-    "@babel/plugin-proposal-export-default-from": "7.24.7",
+    "@babel/core": "7.26.0",
+    "@babel/eslint-parser": "7.25.9",
+    "@babel/plugin-proposal-export-default-from": "7.25.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.25.3",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
     "@types/lodash": "4.14.195",
-    "@types/react-lazyload": "3.2.0",
+    "@types/react-lazyload": "3.2.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-text-truncate": "0.14.1",
-    "@types/react-window": "1.8.5",
-    "@types/redux-actions": "2.6.2",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
+    "@types/react-text-truncate": "0.19.0",
+    "@types/react-window": "1.8.8",
+    "@types/redux-actions": "2.6.5",
+    "@types/webpack-livereload-plugin": "2.3.6",
+    "@typescript-eslint/eslint-plugin": "8.18.1",
+    "@typescript-eslint/parser": "8.18.1",
     "autoprefixer": "10.4.20",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-inline-classnames": "2.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "core-js": "3.38.1",
+    "core-js": "3.41.0",
     "css-loader": "6.7.3",
     "css-modules-typescript-loader": "4.0.1",
-    "eslint": "8.57.0",
+    "eslint": "8.57.1",
     "eslint-config-prettier": "8.10.0",
     "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-json": "3.1.0",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-simple-import-sort": "12.1.0",
+    "eslint-plugin-react": "7.37.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-simple-import-sort": "12.1.1",
     "file-loader": "6.2.0",
     "filemanager-webpack-plugin": "8.0.0",
     "fork-ts-checker-webpack-plugin": "8.0.0",
-    "html-webpack-plugin": "5.5.1",
+    "html-webpack-plugin": "5.6.0",
     "loader-utils": "^3.2.1",
-    "mini-css-extract-plugin": "2.7.6",
-    "postcss": "8.4.41",
+    "mini-css-extract-plugin": "2.9.1",
+    "postcss": "8.4.47",
     "postcss-color-function": "4.1.0",
     "postcss-loader": "7.3.0",
     "postcss-mixins": "9.0.4",
@@ -136,17 +135,15 @@
     "postcss-url": "10.1.3",
     "prettier": "2.8.8",
     "require-nocache": "1.0.0",
-    "rimraf": "4.4.1",
-    "run-sequence": "2.2.1",
-    "streamqueue": "1.1.2",
+    "rimraf": "6.0.1",
     "style-loader": "3.3.2",
     "stylelint": "15.6.1",
-    "stylelint-order": "6.0.3",
-    "terser-webpack-plugin": "5.3.9",
-    "ts-loader": "9.4.2",
+    "stylelint-order": "6.0.4",
+    "terser-webpack-plugin": "5.3.10",
+    "ts-loader": "9.5.1",
     "typescript-plugin-css-modules": "5.0.1",
     "url-loader": "4.1.1",
-    "webpack": "5.88.1",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
     "webpack-livereload-plugin": "3.0.2",
     "worker-loader": "3.0.8"

src/Directory.Build.props

@@ -99,6 +99,35 @@
     <RootNamespace Condition="'$(LidarrProject)'=='true'">$(MSBuildProjectName.Replace('Lidarr','NzbDrone'))</RootNamespace>
   </PropertyGroup>
 
+  <ItemGroup Condition="'$(TestProject)'!='true'">
+    <!-- Annotates .NET assemblies with repository information including SHA -->
+    <!-- Sentry uses this to link directly to GitHub at the exact version/file/line -->
+    <!-- This is built-in on .NET 8 and can be removed once the project is updated -->
+    <PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.1.1" PrivateAssets="All" />
+  </ItemGroup>
+
+  <!-- Sentry specific configuration: Only in Release mode -->
+  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
+    <!-- https://docs.sentry.io/platforms/dotnet/configuration/msbuild/ -->
+    <!-- OrgSlug, ProjectSlug and AuthToken are required. 
+    They can be set below, via argument to 'msbuild -p:' or environment variable -->
+    <SentryOrg></SentryOrg>
+    <SentryProject></SentryProject>
+    <SentryUrl></SentryUrl> <!--  If empty, assumed to be sentry.io -->
+    <SentryAuthToken></SentryAuthToken> <!-- Use env var instead: SENTRY_AUTH_TOKEN -->
+
+    <!-- Upload PDBs to Sentry, enabling stack traces with line numbers and file paths
+      without the need to deploy the application with PDBs -->
+    <SentryUploadSymbols>true</SentryUploadSymbols>
+
+    <!-- Source Link settings -->
+    <!-- https://github.com/dotnet/sourcelink/blob/main/docs/README.md#publishrepositoryurl -->
+    <PublishRepositoryUrl>true</PublishRepositoryUrl>
+    <!--  Embeds all source code in the respective PDB. This can make it a bit bigger but since it'll be uploaded
+      to Sentry and not distributed to run on the server, it helps debug crashes while making releases smaller -->
+    <EmbedAllSources>true</EmbedAllSources>
+  </PropertyGroup>
+
   <!-- Standard testing packages -->
   <ItemGroup Condition="'$(TestProject)'=='true'">
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />

src/Lidarr.Api.V1/Albums/AlbumLookupController.cs

@@ -20,7 +20,8 @@ namespace Lidarr.Api.V1.Albums
         }
 
         [HttpGet]
-        public object Search(string term)
+        [Produces("application/json")]
+        public IEnumerable<AlbumResource> Search(string term)
         {
             var searchResults = _searchProxy.SearchForNewAlbum(term, null);
             return MapToResource(searchResults).ToList();

src/Lidarr.Api.V1/Artist/ArtistController.cs

@@ -179,9 +179,8 @@ namespace Lidarr.Api.V1.Artist
                 ArtistId = artist.Id,
                 SourcePath = sourcePath,
                 DestinationPath = destinationPath,
-                MoveFiles = moveFiles,
-                Trigger = CommandTrigger.Manual
-            });
+                MoveFiles = moveFiles
+            }, trigger: CommandTrigger.Manual);
 
             var model = artistResource.ToModel(artist);
 

src/Lidarr.Api.V1/Artist/ArtistLookupController.cs

@@ -23,7 +23,8 @@ namespace Lidarr.Api.V1.Artist
         }
 
         [HttpGet]
-        public object Search([FromQuery] string term)
+        [Produces("application/json")]
+        public IEnumerable<ArtistResource> Search([FromQuery] string term)
         {
             var searchResults = _searchProxy.SearchForNewArtist(term);
             return MapToResource(searchResults).ToList();

src/Lidarr.Api.V1/Commands/CommandController.cs

@@ -66,9 +66,8 @@ namespace Lidarr.Api.V1.Commands
                     ? CommandPriority.High
                     : CommandPriority.Normal;
 
-                dynamic command = STJson.Deserialize(body, commandType);
+                var command = STJson.Deserialize(body, commandType) as Command;
 
-                command.Trigger = CommandTrigger.Manual;
                 command.SuppressMessages = !command.SendUpdatesToClient;
                 command.SendUpdatesToClient = true;
                 command.ClientUserAgent = Request.Headers["UserAgent"];

src/Lidarr.Api.V1/Config/HostConfigController.cs

@@ -33,7 +33,6 @@ namespace Lidarr.Api.V1.Config
 
             SharedValidator.RuleFor(c => c.BindAddress)
                            .ValidIpAddress()
-                           .NotListenAllIp4Address()
                            .When(c => c.BindAddress != "*" && c.BindAddress != "localhost");
 
             SharedValidator.RuleFor(c => c.Port).ValidPort();

src/Lidarr.Api.V1/Config/HostConfigResource.cs

@@ -45,6 +45,7 @@ namespace Lidarr.Api.V1.Config
         public string BackupFolder { get; set; }
         public int BackupInterval { get; set; }
         public int BackupRetention { get; set; }
+        public bool TrustCgnatIpAddresses { get; set; }
     }
 
     public static class HostConfigResourceMapper

src/Lidarr.Api.V1/DownloadClient/DownloadClientController.cs

@@ -1,5 +1,7 @@
+using FluentValidation;
 using Lidarr.Http;
 using NzbDrone.Core.Download;
+using NzbDrone.SignalR;
 
 namespace Lidarr.Api.V1.DownloadClient
 {
@@ -9,9 +11,10 @@ namespace Lidarr.Api.V1.DownloadClient
         public static readonly DownloadClientResourceMapper ResourceMapper = new ();
         public static readonly DownloadClientBulkResourceMapper BulkResourceMapper = new ();
 
-        public DownloadClientController(IDownloadClientFactory downloadClientFactory)
-            : base(downloadClientFactory, "downloadclient", ResourceMapper, BulkResourceMapper)
+        public DownloadClientController(IBroadcastSignalRMessage signalRBroadcaster, IDownloadClientFactory downloadClientFactory)
+            : base(signalRBroadcaster, downloadClientFactory, "downloadclient", ResourceMapper, BulkResourceMapper)
         {
+            SharedValidator.RuleFor(c => c.Priority).InclusiveBetween(1, 50);
         }
     }
 }

src/Lidarr.Api.V1/Health/HealthResource.cs

@@ -1,7 +1,6 @@
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Linq;
 using Lidarr.Http.REST;
-using NzbDrone.Common.Http;
 using NzbDrone.Core.HealthCheck;
 
 namespace Lidarr.Api.V1.Health
@@ -11,7 +10,7 @@ namespace Lidarr.Api.V1.Health
         public string Source { get; set; }
         public HealthCheckResult Type { get; set; }
         public string Message { get; set; }
-        public HttpUri WikiUrl { get; set; }
+        public string WikiUrl { get; set; }
     }
 
     public static class HealthResourceMapper
@@ -29,7 +28,7 @@ namespace Lidarr.Api.V1.Health
                 Source = model.Source.Name,
                 Type = model.Type,
                 Message = model.Message,
-                WikiUrl = model.WikiUrl
+                WikiUrl = model.WikiUrl.FullUri
             };
         }
 

src/Lidarr.Api.V1/ImportLists/ImportListController.cs

@@ -3,6 +3,7 @@ using Lidarr.Http;
 using NzbDrone.Core.ImportLists;
 using NzbDrone.Core.Validation;
 using NzbDrone.Core.Validation.Paths;
+using NzbDrone.SignalR;
 
 namespace Lidarr.Api.V1.ImportLists
 {
@@ -12,11 +13,12 @@ namespace Lidarr.Api.V1.ImportLists
         public static readonly ImportListResourceMapper ResourceMapper = new ();
         public static readonly ImportListBulkResourceMapper BulkResourceMapper = new ();
 
-        public ImportListController(IImportListFactory importListFactory,
-                                    RootFolderExistsValidator rootFolderExistsValidator,
-                                    QualityProfileExistsValidator qualityProfileExistsValidator,
-                                    MetadataProfileExistsValidator metadataProfileExistsValidator)
-            : base(importListFactory, "importlist", ResourceMapper, BulkResourceMapper)
+        public ImportListController(IBroadcastSignalRMessage signalRBroadcaster,
+            IImportListFactory importListFactory,
+            RootFolderExistsValidator rootFolderExistsValidator,
+            QualityProfileExistsValidator qualityProfileExistsValidator,
+            MetadataProfileExistsValidator metadataProfileExistsValidator)
+            : base(signalRBroadcaster, importListFactory, "importlist", ResourceMapper, BulkResourceMapper)
         {
             SharedValidator.RuleFor(c => c.RootFolderPath).Cascade(CascadeMode.Stop)
                 .IsValidPath()

src/Lidarr.Api.V1/Indexers/IndexerController.cs

@@ -1,6 +1,8 @@
+using FluentValidation;
 using Lidarr.Http;
 using NzbDrone.Core.Indexers;
 using NzbDrone.Core.Validation;
+using NzbDrone.SignalR;
 
 namespace Lidarr.Api.V1.Indexers
 {
@@ -10,9 +12,12 @@ namespace Lidarr.Api.V1.Indexers
         public static readonly IndexerResourceMapper ResourceMapper = new ();
         public static readonly IndexerBulkResourceMapper BulkResourceMapper = new ();
 
-        public IndexerController(IndexerFactory indexerFactory, DownloadClientExistsValidator downloadClientExistsValidator)
-            : base(indexerFactory, "indexer", ResourceMapper, BulkResourceMapper)
+        public IndexerController(IBroadcastSignalRMessage signalRBroadcaster,
+            IndexerFactory indexerFactory,
+            DownloadClientExistsValidator downloadClientExistsValidator)
+            : base(signalRBroadcaster, indexerFactory, "indexer", ResourceMapper, BulkResourceMapper)
         {
+            SharedValidator.RuleFor(c => c.Priority).InclusiveBetween(1, 50);
             SharedValidator.RuleFor(c => c.DownloadClientId).SetValidator(downloadClientExistsValidator);
         }
     }

src/Lidarr.Api.V1/Lidarr.Api.V1.csproj

@@ -12,8 +12,8 @@
     <PackageReference Include="Swashbuckle.AspNetCore.Annotations" Version="6.6.2" />
     <PackageReference Include="System.Reflection.TypeExtensions" Version="4.7.0" />
     <PackageReference Include="FluentValidation" Version="9.5.4" />
-    <PackageReference Include="Ical.Net" Version="4.2.0" />
-    <PackageReference Include="NLog" Version="5.3.3" />
+    <PackageReference Include="Ical.Net" Version="4.3.1" />
+    <PackageReference Include="NLog" Version="5.4.0" />
     <PackageReference Include="System.IO.Abstractions" Version="17.0.24" />
   </ItemGroup>
 </Project>

src/Lidarr.Api.V1/Logs/LogController.cs

@@ -2,6 +2,7 @@ using Lidarr.Http;
 using Lidarr.Http.Extensions;
 using Microsoft.AspNetCore.Mvc;
 using NzbDrone.Common.Extensions;
+using NzbDrone.Core.Configuration;
 using NzbDrone.Core.Instrumentation;
 
 namespace Lidarr.Api.V1.Logs
@@ -10,16 +11,23 @@ namespace Lidarr.Api.V1.Logs
     public class LogController : Controller
     {
         private readonly ILogService _logService;
+        private readonly IConfigFileProvider _configFileProvider;
 
-        public LogController(ILogService logService)
+        public LogController(ILogService logService, IConfigFileProvider configFileProvider)
         {
             _logService = logService;
+            _configFileProvider = configFileProvider;
         }
 
         [HttpGet]
         [Produces("application/json")]
         public PagingResource<LogResource> GetLogs([FromQuery] PagingRequestResource paging, string level)
         {
+            if (!_configFileProvider.LogDbEnabled)
+            {
+                return new PagingResource<LogResource>();
+            }
+
             var pagingResource = new PagingResource<LogResource>(paging);
             var pageSpec = pagingResource.MapToPagingSpec<LogResource, Log>();