Automated API Docs update

(cherry picked from commit d7025a98deb321397db9a4933cf688b68eafeba9)

Closes #8861

.editorconfig

@@ -40,9 +40,18 @@ dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _
 
 # Prefer "var" everywhere
-csharp_style_var_for_built_in_types = true:suggestion
-csharp_style_var_when_type_is_apparent = true:suggestion
-csharp_style_var_elsewhere = true:suggestion
+csharp_style_var_for_built_in_types = true
+csharp_style_var_when_type_is_apparent = true
+csharp_style_var_elsewhere = true
+# Prefer "out" variables to be declared inline
+csharp_style_inlined_variable_declaration = true
+
+# Using directive is unnecessary.
+dotnet_diagnostic.IDE0005.severity = error
+# Use var instead of explicit type
+dotnet_diagnostic.IDE0007.severity = error
+# Inline variable declaration
+dotnet_diagnostic.IDE0018.severity = error
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none
@@ -261,7 +270,7 @@ dotnet_diagnostic.CA5397.severity = suggestion
 
 dotnet_diagnostic.SYSLIB0006.severity = none
 
-[*.{js,html,js,hbs,less,css}]
+[*.{js,html,hbs,less,css,ts,tsx}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.gitattributes

@@ -3,7 +3,7 @@
 
 # Explicitly set bash scripts to have unix endings
 *.sh text eol=lf
-macOS/Radarr text eol=lf
+distribution/osx/Radarr text eol=lf
 
 # Custom for Visual Studio
 *.cs     diff=csharp

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -76,7 +76,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.5.1'
+  majorVersion: '4.7.2'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -211,8 +211,8 @@ stages:
         displayName: Fetch Frontend
       - bash: |
           ./build.sh --packages --installer
-          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp distribution/windows/setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
         displayName: Create Installers
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'WindowsInstaller'
@@ -363,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"

build.sh

@@ -21,7 +21,7 @@ UpdateVersionNumber()
         echo "Updating Version Info"
         sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
         sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" distribution/osx/Radarr.app/Contents/Info.plist
     fi
 }
 
@@ -184,7 +184,7 @@ PackageMacOSApp()
 
     rm -rf $folder
     mkdir -p $folder
-    cp -r macOS/Radarr.app $folder
+    cp -r distribution/osx/Radarr.app $folder
     mkdir -p $folder/Radarr.app/Contents/MacOS
 
     echo "Copying Binaries"
@@ -246,7 +246,7 @@ BuildInstaller()
     local framework="$1"
     local runtime="$2"
     
-    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+    ./_inno/ISCC.exe distribution/windows/setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
 }
 
 InstallInno()

debian/changelog

@@ -1,5 +0,0 @@
-nzbdrone {version} {branch}; urgency=low
-
-  * Automatic Release.
-
- -- NzbDrone <contact@nzbdrone.com>  Mon, 26 Aug 2013 00:00:00 -0700

debian/compat

@@ -1 +0,0 @@
-8

debian/control

@@ -1,12 +0,0 @@
-Section: web
-Priority: optional
-Maintainer: Sonarr <contact@nzbdrone.com>
-Source: nzbdrone
-Homepage: https://sonarr.tv
-Vcs-Git: git@github.com:Sonarr/Sonarr.git
-Vcs-Browser: https://github.com/Sonarr/Sonarr
-
-Package: nzbdrone
-Architecture: all
-Depends: libmono-cil-dev (>= 3.2), sqlite3 (>= 3.7), mediainfo (>= 0.7.52)
-Description: Sonarr is an internet PVR

debian/copyright

@@ -1,24 +0,0 @@
-Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
-Upstream-Name: nzbdrone
-Source: https://github.com/Sonarr/Sonarr
-
-Files: *
-Copyright: 2010-2016 Sonarr <hello@sonarr.tv>
-
-License: GPL-3.0+
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
- .
- This package is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
- .
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
- .
- On Debian systems, the complete text of the GNU General
- Public License version 3 can be found in "/usr/share/common-licenses/GPL-3".

debian/install

@@ -1 +0,0 @@
-nzbdrone_bin/* opt/NzbDrone

debian/rules

@@ -1,13 +0,0 @@
-#!/usr/bin/make -f
-# -*- makefile -*-
-# Sample debian/rules that uses debhelper.
-# This file was originally written by Joey Hess and Craig Small.
-# As a special exception, when this file is copied by dh-make into a
-# dh-make output file, you may use that output file without restriction.
-# This special exception was added by Craig Small in version 0.37 of dh-make.
-
-# Uncomment this to turn on verbose mode.
-#export DH_VERBOSE=1
-
-%:
-	dh $@ 

distribution/windows/setup/radarr.iss

@@ -52,8 +52,8 @@ Name: "none"; Description: "Do not start automatically"; GroupDescription: "Star
 Name: "{app}"; Permissions: users-modify
 
 [Files]
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
-Source: "..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\Radarr.exe"; DestDir: "{app}\bin"; Flags: ignoreversion
+Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Radarr\*"; Excludes: "Radarr.Update"; DestDir: "{app}\bin"; Flags: ignoreversion recursesubdirs createallsubdirs
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files
 
 [Icons]

frontend/build/webpack.config.js

@@ -66,23 +66,23 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name].js',
+      filename: '[name]-[contenthash].js',
       sourceMapFilename: '[file].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: 'named',
-      splitChunks: {
-        chunks: 'initial',
-        name: 'vendors'
-      }
+      chunkIds: isProduction ? 'deterministic' : 'named'
     },
 
     performance: {
       hints: false
     },
 
+    experiments: {
+      topLevelAwait: true
+    },
+
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
@@ -90,7 +90,8 @@ module.exports = (env) => {
       }),
 
       new MiniCssExtractPlugin({
-        filename: 'Content/styles.css'
+        filename: 'Content/styles.css',
+        chunkFilename: 'Content/[id]-[chunkhash].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -233,6 +234,7 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
+                limit: 10240,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -156,16 +157,16 @@ class Blocklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
-                {translate('NoHistory')}
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
           }
 
           {
@@ -209,7 +210,7 @@ class Blocklist extends Component {
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
           title={translate('RemoveSelected')}
-          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
           confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -83,9 +84,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -93,9 +94,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/HistoryRow.js

@@ -4,7 +4,8 @@ import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, tooltipPositions } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
@@ -176,7 +177,14 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.customFormatScore}
                 >
-                  {formatCustomFormatScore(customFormatScore)}
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
                 </TableRowCell>
               );
             }
@@ -257,4 +265,8 @@ HistoryRow.propTypes = {
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
+HistoryRow.defaultProps = {
+  customFormats: []
+};
+
 export default HistoryRow;

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -231,17 +232,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Activity/Queue/QueueRow.css

@@ -16,6 +16,12 @@
   width: 150px;
 }
 
+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 55px;
+}
+
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/Queue/QueueRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
+  'customFormatScore': string;
   'progress': string;
   'protocol': string;
   'quality': string;

frontend/src/Activity/Queue/QueueRow.js

@@ -8,13 +8,15 @@ import ProgressBar from 'Components/ProgressBar';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
@@ -42,14 +44,14 @@ class QueueRow extends Component {
     this.setState({ isRemoveQueueItemModalOpen: true });
   };
 
-  onRemoveQueueItemModalConfirmed = (blocklist) => {
+  onRemoveQueueItemModalConfirmed = (blocklist, skipRedownload) => {
     const {
       onRemoveQueueItemPress,
       onQueueRowModalOpenOrClose
     } = this.props;
 
     onQueueRowModalOpenOrClose(false);
-    onRemoveQueueItemPress(blocklist);
+    onRemoveQueueItemPress(blocklist, skipRedownload);
 
     this.setState({ isRemoveQueueItemModalOpen: false });
   };
@@ -88,6 +90,7 @@ class QueueRow extends Component {
       movie,
       quality,
       customFormats,
+      customFormatScore,
       languages,
       protocol,
       indexer,
@@ -201,6 +204,24 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'protocol') {
               return (
                 <TableRowCell key={name}>
@@ -365,6 +386,7 @@ QueueRow.propTypes = {
   movie: PropTypes.object,
   quality: PropTypes.object.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
@@ -390,6 +412,7 @@ QueueRow.propTypes = {
 };
 
 QueueRow.defaultProps = {
+  customFormats: [],
   isGrabbing: false,
   isRemoving: false
 };

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -22,7 +22,8 @@ class RemoveQueueItemModal extends Component {
 
     this.state = {
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     };
   }
 
@@ -32,7 +33,8 @@ class RemoveQueueItemModal extends Component {
   resetState = function() {
     this.setState({
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     });
   };
 
@@ -47,6 +49,10 @@ class RemoveQueueItemModal extends Component {
     this.setState({ blocklist: value });
   };
 
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
   onRemoveConfirmed = () => {
     const state = this.state;
 
@@ -70,7 +76,7 @@ class RemoveQueueItemModal extends Component {
       isPending
     } = this.props;
 
-    const { remove, blocklist } = this.state;
+    const { remove, blocklist, skipRedownload } = this.state;
 
     return (
       <Modal
@@ -118,6 +124,20 @@ class RemoveQueueItemModal extends Component {
               />
             </FormGroup>
 
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
           </ModalBody>
 
           <ModalFooter>

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -23,7 +23,8 @@ class RemoveQueueItemsModal extends Component {
 
     this.state = {
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     };
   }
 
@@ -33,7 +34,8 @@ class RemoveQueueItemsModal extends Component {
   resetState = function() {
     this.setState({
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     });
   };
 
@@ -48,6 +50,10 @@ class RemoveQueueItemsModal extends Component {
     this.setState({ blocklist: value });
   };
 
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
   onRemoveConfirmed = () => {
     const state = this.state;
 
@@ -71,7 +77,7 @@ class RemoveQueueItemsModal extends Component {
       allPending
     } = this.props;
 
-    const { remove, blocklist } = this.state;
+    const { remove, blocklist, skipRedownload } = this.state;
 
     return (
       <Modal
@@ -88,7 +94,7 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalBody>
             <div className={styles.message}>
-              {selectedCount > 1 ? translate('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
             </div>
 
             {
@@ -122,6 +128,20 @@ class RemoveQueueItemsModal extends Component {
               />
             </FormGroup>
 
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
           </ModalBody>
 
           <ModalFooter>
@@ -133,7 +153,7 @@ class RemoveQueueItemsModal extends Component {
               kind={kinds.DANGER}
               onPress={this.onRemoveConfirmed}
             >
-              Remove
+              {translate('Remove')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -1,9 +1,11 @@
 import { reduce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -105,9 +107,9 @@ class ImportMovie extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 
@@ -116,9 +118,9 @@ class ImportMovie extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('AllMoviesInPathHaveBeenImported', [path])}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -92,9 +92,9 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/App/App.js

@@ -7,13 +7,13 @@ import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+function App({ store, history, hasTranslationsError }) {
   return (
     <DocumentTitle title={window.Radarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme>
-            <PageConnector>
+            <PageConnector hasTranslationsError={hasTranslationsError}>
               <AppRoutes app={App} />
             </PageConnector>
           </ApplyTheme>
@@ -25,7 +25,8 @@ function App({ store, history }) {
 
 App.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
+  hasTranslationsError: PropTypes.bool.isRequired
 };
 
 export default App;

frontend/src/App/AppRoutes.js

@@ -13,7 +13,7 @@ import Switch from 'Components/Router/Switch';
 import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
 import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
 import MovieIndex from 'Movie/Index/MovieIndex';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
+import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
@@ -148,7 +148,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/customformats"
-        component={CustomFormatSettingsConnector}
+        component={CustomFormatSettingsPage}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -1,6 +1,7 @@
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import MovieFilesAppState from './MovieFilesAppState';
 import MoviesAppState, { MovieIndexAppState } from './MoviesAppState';
+import ParseAppState from './ParseAppState';
 import QueueAppState from './QueueAppState';
 import SettingsAppState from './SettingsAppState';
 import TagsAppState from './TagsAppState';
@@ -41,6 +42,7 @@ interface AppState {
   movieFiles: MovieFilesAppState;
   interactiveImport: InteractiveImportAppState;
   movieIndex: MovieIndexAppState;
+  parse: ParseAppState;
   settings: SettingsAppState;
   movies: MoviesAppState;
   tags: TagsAppState;

frontend/src/App/State/ParseAppState.ts

@@ -0,0 +1,34 @@
+import ModelBase from 'App/ModelBase';
+import { AppSectionItemState } from 'App/State/AppSectionState';
+import Language from 'Language/Language';
+import Movie from 'Movie/Movie';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+
+export interface ParsedMovieInfo {
+  releaseTitle: string;
+  originalTitle: string;
+  movieTitle: string;
+  movieTitles: string[];
+  year: number;
+  quality: QualityModel;
+  languages: Language[];
+  releaseHash: string;
+  releaseGroup?: string;
+  edition?: string;
+  tmdbId?: number;
+  imdbId?: string;
+}
+
+export interface ParseModel extends ModelBase {
+  title: string;
+  parsedMovieInfo: ParsedMovieInfo;
+  movie?: Movie;
+  languages?: Language[];
+  customFormats?: CustomFormat[];
+  customFormatScore?: number;
+}
+
+type ParseAppState = AppSectionItemState<ParseModel>;
+
+export default ParseAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -1,14 +1,33 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionSaveState,
   AppSectionSchemaState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
 import DownloadClient from 'typings/DownloadClient';
+import ImportList from 'typings/ImportList';
+import Indexer from 'typings/Indexer';
+import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import { UiSettings } from 'typings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ImportListAppState
+  extends AppSectionState<ImportList>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
     AppSectionDeleteState {}
 
 export interface QualityProfilesAppState
@@ -20,6 +39,9 @@ export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
+  importLists: ImportListAppState;
+  indexers: IndexerAppState;
+  notifications: NotificationAppState;
   language: LanguageSettingsAppState;
   uiSettings: UiSettingsAppState;
   qualityProfiles: QualityProfilesAppState;

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Collection/AddNewCollectionMovieModalContentConnector.js

@@ -28,7 +28,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         searchForMovie: collection.searchOnAdd,
-        tags: []
+        tags: collection.tags || []
       };
 
       const {

frontend/src/Collection/Collection.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -9,7 +10,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -313,9 +314,9 @@ class Collection extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCollections')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Collection/CollectionItemConnector.js

@@ -2,17 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
 
 function createMapStateToProps() {
   return createSelector(
     createCollectionSelector(),
-    createAllMoviesSelector(),
-    (
-      collection,
-      allMovies
-    ) => {
+    (collection) => {
       // If a movie is deleted this selector may fire before the parent
       // selecors, which will result in an undefined movie, if that happens
       // we want to return early here and again in the render function to avoid
@@ -22,21 +17,11 @@ function createMapStateToProps() {
         return {};
       }
 
-      let allGenres = [];
-      let libraryMovies = 0;
-
-      collection.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-
-        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
-          libraryMovies++;
-        }
-      });
+      const allGenres = collection.movies.flatMap((movie) => movie.genres);
 
       return {
         ...collection,
-        genres: Array.from(new Set(allGenres)).slice(0, 3),
-        missingMovies: collection.movies.length - libraryMovies
+        genres: Array.from(new Set(allGenres)).slice(0, 3)
       };
     }
   );

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -50,6 +50,7 @@ class EditCollectionModalContent extends Component {
       minimumAvailability,
       // Id,
       rootFolderPath,
+      tags,
       searchOnAdd
     } = item;
 
@@ -126,6 +127,17 @@ class EditCollectionModalContent extends Component {
                   />
                 </FormGroup>
 
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+
                 <FormGroup>
                   <FormLabel>{translate('SearchOnAdd')}</FormLabel>
 

frontend/src/Collection/Edit/EditCollectionModalContentConnector.js

@@ -42,6 +42,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         rootFolderPath: collection.rootFolderPath,
+        tags: collection.tags,
         searchOnAdd: collection.searchOnAdd
       };
 

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -28,6 +28,14 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+        <SortMenuItem
+          name="missingMovies"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Missing')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Collection/Overview/CollectionMovie.css

@@ -102,7 +102,7 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: var(--black);
 }
 
 .monitorToggleButton {

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -580,7 +580,7 @@ EnhancedSelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Components/Form/FormInputGroup.js

@@ -265,6 +265,8 @@ FormInputGroup.propTypes = {
   values: PropTypes.arrayOf(PropTypes.any),
   type: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all),
+  min: PropTypes.number,
+  max: PropTypes.number,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   helpText: PropTypes.string,

frontend/src/Components/Form/NumberInput.js

@@ -10,7 +10,7 @@ function parseValue(props, value) {
   } = props;
 
   if (value == null || value === '') {
-    return min;
+    return null;
   }
 
   let newValue = isFloat ? parseFloat(value) : parseInt(value);

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -63,6 +63,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -96,6 +97,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -122,6 +124,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -69,7 +69,7 @@ class QualityProfileSelectInputConnector extends Component {
   // Listeners
 
   onChange = ({ name, value }) => {
-    this.props.onChange({ name, value: parseInt(value) });
+    this.props.onChange({ name, value: value === 'noChange' ? value : parseInt(value) });
   };
 
   //

frontend/src/Components/Loading/LoadingMessage.js

@@ -13,7 +13,7 @@ const messages = [
   'Loading humorous message... Please Wait',
   'I could\'ve been faster in Python',
   'Don\'t forget to rewind your movies',
-  'Congratulations! you are the 1000th visitor.',
+  'Congratulations! You are the 1000th visitor.',
   'HELP! I\'m being held hostage and forced to write these stupid lines!',
   'RE-calibrating the internet...',
   'I\'ll be here all week',

frontend/src/Components/Page/ErrorPage.js

@@ -7,6 +7,7 @@ function ErrorPage(props) {
   const {
     version,
     isLocalStorageSupported,
+    hasTranslationsError,
     moviesError,
     customFiltersError,
     tagsError,
@@ -20,6 +21,8 @@ function ErrorPage(props) {
 
   if (!isLocalStorageSupported) {
     errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
+  } else if (hasTranslationsError) {
+    errorMessage = 'Failed to load translations from API';
   } else if (moviesError) {
     errorMessage = getErrorMessage(moviesError, 'Failed to load movie from API');
   } else if (customFiltersError) {
@@ -52,6 +55,7 @@ function ErrorPage(props) {
 ErrorPage.propTypes = {
   version: PropTypes.string.isRequired,
   isLocalStorageSupported: PropTypes.bool.isRequired,
+  hasTranslationsError: PropTypes.bool.isRequired,
   moviesError: PropTypes.object,
   customFiltersError: PropTypes.object,
   tagsError: PropTypes.object,

frontend/src/Components/Page/Header/MovieSearchInputConnector.js

@@ -19,6 +19,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles = [],
+          tmdbId,
+          imdbId,
           tags = []
         } = movie;
 
@@ -29,6 +31,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles,
+          tmdbId,
+          imdbId,
           firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);

frontend/src/Components/Page/Header/MovieSearchResult.js

@@ -12,6 +12,8 @@ function MovieSearchResult(props) {
     year,
     images,
     alternateTitles,
+    tmdbId,
+    imdbId,
     tags
   } = props;
 
@@ -47,6 +49,22 @@ function MovieSearchResult(props) {
             null
         }
 
+        {
+          match.key === 'tmdbId' && tmdbId ?
+            <div className={styles.alternateTitle}>
+              TmdbId: {tmdbId}
+            </div> :
+            null
+        }
+
+        {
+          match.key === 'imdbId' && imdbId ?
+            <div className={styles.alternateTitle}>
+              ImdbId: {imdbId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -69,6 +87,8 @@ MovieSearchResult.propTypes = {
   year: PropTypes.number.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tmdbId: PropTypes.number,
+  imdbId: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

frontend/src/Components/Page/Header/fuse.worker.js

@@ -9,6 +9,8 @@ const fuseOptions = {
   keys: [
     'title',
     'alternateTitles.title',
+    'tmdbId',
+    'imdbId',
     'tags.label'
   ]
 };

frontend/src/Components/Page/PageConnector.js

@@ -232,6 +232,7 @@ class PageConnector extends Component {
 
   render() {
     const {
+      hasTranslationsError,
       isPopulated,
       hasError,
       dispatchFetchMovies,
@@ -246,11 +247,12 @@ class PageConnector extends Component {
       ...otherProps
     } = this.props;
 
-    if (hasError || !this.state.isLocalStorageSupported) {
+    if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
       return (
         <ErrorPage
           {...this.state}
           {...otherProps}
+          hasTranslationsError={hasTranslationsError}
         />
       );
     }
@@ -271,6 +273,7 @@ class PageConnector extends Component {
 }
 
 PageConnector.propTypes = {
+  hasTranslationsError: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
   isSidebarVisible: PropTypes.bool.isRequired,

frontend/src/Components/Page/PageContentBody.tsx

@@ -5,8 +5,8 @@ import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
 
 interface PageContentBodyProps {
-  className: string;
-  innerClassName: string;
+  className?: string;
+  innerClassName?: string;
   children: ReactNode;
   initialScrollTop?: number;
   onScroll?: (payload: OnScroll) => void;

frontend/src/Components/Page/PageSectionContent.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 
 function PageSectionContent(props) {
   const {
@@ -17,7 +19,7 @@ function PageSectionContent(props) {
     );
   } else if (!isFetching && !!error) {
     return (
-      <div>{errorMessage}</div>
+      <Alert kind={kinds.DANGER}>{errorMessage}</Alert>
     );
   } else if (isPopulated && !error) {
     return (

frontend/src/Components/ProgressBar.css

@@ -16,6 +16,46 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
+
+  &.default {
+    background-color: var(--darkGray);
+  }
+
+  &.primary {
+    background-color: var(--primaryColor);
+  }
+
+  &.danger {
+    background-color: var(--dangerColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
+    }
+  }
+
+  &.success {
+    background-color: var(--successColor);
+  }
+
+  &.purple {
+    background-color: var(--purple);
+  }
+
+  &.warning {
+    background-color: var(--warningColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
+    }
+  }
+
+  &.info {
+    background-color: var(--infoColor);
+  }
+
+  &.queue {
+    background-color: var(--queueColor);
+  }
 }
 
 .frontTextContainer {
@@ -45,42 +85,6 @@
   cursor: default;
 }
 
-.primary {
-  background-color: var(--primaryColor);
-}
-
-.danger {
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
-  }
-}
-
-.success {
-  background-color: var(--successColor);
-}
-
-.purple {
-  background-color: var(--purple);
-}
-
-.warning {
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
-  }
-}
-
-.info {
-  background-color: var(--infoColor);
-}
-
-.queue {
-  background-color: var(--queueColor);
-}
-
 .small {
   height: $progressBarSmallHeight;
 

frontend/src/Components/ProgressBar.css.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'backTextContainer': string;
   'container': string;
   'danger': string;
+  'default': string;
   'frontText': string;
   'frontTextContainer': string;
   'info': string;

frontend/src/Components/ProgressBar.js

@@ -38,7 +38,7 @@ function ProgressBar(props) {
             {
               showText && width ?
                 <div
-                  className={styles.backTextContainer}
+                  className={classNames(styles.backTextContainer, styles[kind])}
                   style={{ width: actualWidth }}
                 >
                   <div className={styles.backText}>
@@ -67,7 +67,7 @@ function ProgressBar(props) {
             {
               showText ?
                 <div
-                  className={styles.frontTextContainer}
+                  className={classNames(styles.frontTextContainer, styles[kind])}
                   style={{ width: progressPercent }}
                 >
                   <div

frontend/src/Components/Table/VirtualTableRowButton.css

@@ -0,0 +1,4 @@
+.row {
+  composes: link from '~Components/Link/Link.css';
+  composes: row from '~./VirtualTableRow.css';
+}

frontend/src/Components/Table/VirtualTableRowButton.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'row': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Table/VirtualTableRowButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import VirtualTableRow from './VirtualTableRow';
+import styles from './VirtualTableRowButton.css';
+
+function VirtualTableRowButton(props) {
+  return (
+    <Link
+      className={styles.row}
+      component={VirtualTableRow}
+      {...props}
+    />
+  );
+}
+
+export default VirtualTableRowButton;

frontend/src/Components/TagList.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
@@ -6,16 +5,15 @@ import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((tag) => !!tag)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
   return (
     <div className={styles.tags}>
       {
-        tags.map((t) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
+        sortedTags.map((tag) => {
           return (
             <Label
               key={tag.id}

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

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

frontend/src/DiscoverMovie/DiscoverMovie.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -10,7 +11,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -369,9 +370,9 @@ class DiscoverMovie extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMovies')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css

@@ -39,6 +39,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css

@@ -64,6 +64,12 @@
   flex: 0 0 90px;
 }
 
+.popularity {
+  composes: cell;
+
+  flex: 0 0 100px;
+}
+
 .lists {
   composes: cell;
 

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'lists': string;
   'originalLanguage': string;
   'physicalRelease': string;
+  'popularity': string;
   'ratings': string;
   'runtime': string;
   'sortTitle': string;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -13,6 +13,7 @@ import AddNewDiscoverMovieModal from 'DiscoverMovie/AddNewDiscoverMovieModal';
 import ExcludeMovieModal from 'DiscoverMovie/Exclusion/ExcludeMovieModal';
 import { icons } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
+import MoviePopularityIndex from 'Movie/MoviePopularityIndex';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import translate from 'Utilities/String/translate';
 import ListMovieStatusCell from './ListMovieStatusCell';
@@ -73,6 +74,7 @@ class DiscoverMovieRow extends Component {
       images,
       genres,
       ratings,
+      popularity,
       certification,
       collection,
       columns,
@@ -261,6 +263,14 @@ class DiscoverMovieRow extends Component {
               );
             }
 
+            if (name === 'popularity') {
+              return (
+                <VirtualTableRowCell key={name} className={styles[name]}>
+                  <MoviePopularityIndex popularity={popularity} />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'certification') {
               return (
                 <VirtualTableRowCell
@@ -384,6 +394,7 @@ DiscoverMovieRow.propTypes = {
   runtime: PropTypes.number,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   ratings: PropTypes.object.isRequired,
+  popularity: PropTypes.number.isRequired,
   certification: PropTypes.string,
   collection: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Helpers/Props/icons.js

@@ -34,6 +34,7 @@ import {
   faBug as fasBug,
   faBuilding as fasBuilding,
   faBullhorn as fasBullhorn,
+  faCalculator as fasCalculator,
   faCalendarAlt as fasCalendarAlt,
   faCaretDown as fasCaretDown,
   faCheck as fasCheck,
@@ -61,6 +62,7 @@ import {
   faFileInvoice as farFileInvoice,
   faFilm as fasFilm,
   faFilter as fasFilter,
+  faFire as fasFire,
   faFlag as fasFlag,
   faFolderOpen as fasFolderOpen,
   faForward as fasForward,
@@ -71,6 +73,7 @@ import {
   faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
+  faListCheck as fasListCheck,
   faMedkit as fasMedkit,
   faMinus as fasMinus,
   faPause as fasPause,
@@ -172,6 +175,7 @@ export const INFO = fasInfoCircle;
 export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
 export const LOGOUT = fasSignOutAlt;
+export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;
 export const MISSING = fasExclamationTriangle;
 export const MONITORED = fasBookmark;
@@ -186,10 +190,12 @@ export const PAGE_PREVIOUS = fasBackward;
 export const PAGE_NEXT = fasForward;
 export const PAGE_LAST = fasFastForward;
 export const PARENT = fasLevelUpAlt;
+export const PARSE = fasCalculator;
 export const PAUSED = fasPause;
 export const PENDING = farClock;
 export const PLAY = fasPlay;
 export const PROFILE = fasUser;
+export const POPULAR = fasFire;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;
 export const QUICK = fasRocket;